I want to create a page on my site with X vertical divisions. These span from the top to the bottom of the page and take up, say 10vw.
This is fine, however what I am struggling with now is that INSIDE those vertical divs I want sections. Some of the vertical divs will have 1 section, some 2, and some three.
This is a fiddle of what I have so far
#topics_selection-container {
position: absolute;
top: 0;
left: 0;
right: 27px;
bottom: 20px;
overflow-x: auto;
overflow-y: none;
white-space: nowrap;
}
.topics_selection-level_container {
display: inline-block;
height: 99.5%;
width: 10vw;
margin: 0px -5px 0px 0px;
overflow: none;
}
.topics_selection-split_cell_1 {
background: green;
margin: 0px;
height: 100%;
}
.topics_selection-split_cell_2 {
background: gray;
margin: 0px;
height: 50%;
}
.topics_selection-split_cell_3 {
background: blue;
margin: 0px;
height: 50%;
}
.topics_selection-split_cell_4 {
background: magenta;
margin: 0px;
height: 33%;
}
.topics_selection-split_cell_5 {
background: orange;
margin: 0px;
height: 33%;
}
.topics_selection-split_cell_6 {
background: purple;
margin: 0px;
height: 33%;
}
.topics_selection-level_1 {
background: red;
}
.topics_selection-level_2 {
background: yellow;
}
<div id="topics_selection-container">
<div class="topics_selection-level_container topics_selection-level_1">
<div class="topics_selection-split_cell_1"></div>
</div>
<div class="topics_selection-level_container topics_selection-level_2">
<div class="topics_selection-split_cell_2"></div>
<div class="topics_selection-split_cell_3"></div>
</div>
<div class="topics_selection-level_container topics_selection-level_2">
<div class="topics_selection-split_cell_4"></div>
<div class="topics_selection-split_cell_5"></div>
<div class="topics_selection-split_cell_6"></div>
</div>
</div>
And as you SEE it works! Thats exactly what I want (except for the small space at the bottom of the three because of the 33%). However when I put content into those smaller divisions you get something different happening. The kind of wrap to the size of the text.
Can anybody suggest how to fix this? Positioning is CSS is not my forte!
Change overflow: none; into overflow: hidden; in .topics_selection-level_container. That will do the trick.
.topics_selection-level_container { display: inline-block; height: 99.5%; width: 10vw; margin: 0px -5px 0px 0px; overflow: hidden; }
https://jsfiddle.net/48tvezgv/4/
You could use flex for this then the level 2 divs can just grow to fit the column:
#topics_selection-container {
position: absolute;
top: 0;
left: 0;
right: 27px;
bottom: 20px;
overflow-x: auto;
overflow-y: none;
display: flex;
flex-direction: row; /* align level 1 children in columns */
flex-wrap: wrap;
}
.topics_selection-level_container {
height: 99.5%;
width: 10vw;
margin: 0px; /* not sure what your left margin was doing so removed it - you can add it back if you want */
overflow: none;
display: flex;
flex-direction: column; /* align level 2 children in rows within this column */
flex-wrap: nowrap;
}
.topics_selection-level_container > div {
flex:1; /* make level2 children grow to fill the column equally */
display:flex;
align-items: center; /* this is for vertical aligning */
justify-content: center; /* these 2 are for horizontal aligning */
text-align:center;
}
.topics_selection-split_cell_1 {
background: green;
}
.topics_selection-split_cell_2 {
background: gray;
}
.topics_selection-split_cell_3 {
background: blue;
}
.topics_selection-split_cell_4 {
background: magenta;
}
.topics_selection-split_cell_5 {
background: orange;
}
.topics_selection-split_cell_6 {
background: purple;
}
.topics_selection-level_1 {
background: red;
}
.topics_selection-level_2 {
background: yellow;
}
<div id="topics_selection-container">
<div class="topics_selection-level_container topics_selection-level_1">
<div class="topics_selection-split_cell_1">add</div>
</div>
<div class="topics_selection-level_container topics_selection-level_2">
<div class="topics_selection-split_cell_2">stuff may be over multiple lines</div>
<div class="topics_selection-split_cell_3">stuff</div>
</div>
<div class="topics_selection-level_container topics_selection-level_2">
<div class="topics_selection-split_cell_4">stuff that can wrap</div>
<div class="topics_selection-split_cell_5">this works</div>
<div class="topics_selection-split_cell_6">yeah!</div>
</div>
</div>
If you switch to floats, it'll work.
.topics_selection-level_container { float:left; height: 99.5%; width: 10vw; margin: 0; }
https://jsfiddle.net/48tvezgv/3/
#topics_selection-container { position: absolute; top: 0; left: 0; right: 27px; bottom: 20px; overflow-x: auto; overflow-y: hidden; }
.topics_selection-level_container { float:left; height: 99.5%; width: 10vw; margin: 0; }
.topics_selection-split_cell_1 { background: green; margin: 0px; height: 100%; }
.topics_selection-split_cell_2 { background: gray; margin: 0px; height: 50%; }
.topics_selection-split_cell_3 { background: blue; margin: 0px; height: 50%; }
.topics_selection-split_cell_4 { background: magenta; margin: 0px; height: calc(100% / 3); }
.topics_selection-split_cell_5 { background: orange; margin: 0px; height: calc(100% / 3); }
.topics_selection-split_cell_6 { background: purple; margin: 0px; height: calc(100% / 3); }
.topics_selection-level_1 { background: red; }
.topics_selection-level_2 { background: yellow; }
<div id="topics_selection-container">
<div class="topics_selection-level_container topics_selection-level_1">
<div class="topics_selection-split_cell_1">zxczxc</div>
</div>
<div class="topics_selection-level_container topics_selection-level_2">
<div class="topics_selection-split_cell_2">asdas</div>
<div class="topics_selection-split_cell_3">qweqwe</div>
</div>
<div class="topics_selection-level_container topics_selection-level_2">
<div class="topics_selection-split_cell_4">cvbcvb</div>
<div class="topics_selection-split_cell_5">urtyryr</div>
<div class="topics_selection-split_cell_6">hdhdfh</div>
</div>
</div>
Also "none" is not a valid value for overflow, I think you want to use hidden. And 33% is not precise enough, use calc (100% / 3)
Use height:33.333333% instead of 33% as 33*3=99...so your 1% is remaining...
You have applied display:inline-block to the outer containers which has by default vertical-align:baseline...
You have to change it to vertical-align:top
Updated Fiddle
Stack Snippet
#topics_selection-container {
position: absolute;
top: 0;
left: 0;
right: 27px;
bottom: 20px;
overflow-x: auto;
overflow-y: none;
white-space: nowrap;
}
.topics_selection-level_container {
display: inline-block;
height: 99.5%;
width: 10vw;
margin: 0px -5px 0px 0px;
overflow: none;
vertical-align: top;
}
.topics_selection-split_cell_1 {
background: green;
margin: 0px;
height: 100%;
}
.topics_selection-split_cell_2 {
background: gray;
margin: 0px;
height: 50%;
}
.topics_selection-split_cell_3 {
background: blue;
margin: 0px;
height: 50%;
}
.topics_selection-split_cell_4 {
background: magenta;
margin: 0px;
height: 33.333333%;
}
.topics_selection-split_cell_5 {
background: orange;
margin: 0px;
height: 33.333333%;
}
.topics_selection-split_cell_6 {
background: purple;
margin: 0px;
height: 33.333333%;
}
.topics_selection-level_1 {
background: red;
}
.topics_selection-level_2 {
background: yellow;
}
<div id="topics_selection-container">
<div class="topics_selection-level_container topics_selection-level_1">
<div class="topics_selection-split_cell_1"></div>
</div>
<div class="topics_selection-level_container topics_selection-level_2">
<div class="topics_selection-split_cell_2"></div>
<div class="topics_selection-split_cell_3"></div>
</div>
<div class="topics_selection-level_container topics_selection-level_2">
<div class="topics_selection-split_cell_4">ggg</div>
<div class="topics_selection-split_cell_5">ffff</div>
<div class="topics_selection-split_cell_6">dddd</div>
</div>
</div>
You just need to adjust the height a little you can give one 34% or give them all 33% with more decimal points.
EDIT: Added content to each inner div and align elements to top of parents.
#topics_selection-container { position: absolute; top: 0; left: 0; right: 27px; display:inline-block; bottom: 20px; overflow-x: auto; vertical-align:top; overflow-y: none; white-space: nowrap; }
.topics_selection-level_container { display: inline-block; height: 99.5%; width: 10vw; margin: 0px -5px 0px 0px; overflow: none; }
.topics_selection-split_cell_1 { background: green; margin: 0px; height: 100%; }
.topics_selection-split_cell_2 { background: gray; margin: 0px; height: 50%; }
.topics_selection-split_cell_3 { background: blue; margin: 0px; height: 50%; }
.topics_selection-split_cell_4 { background: magenta; margin: 0px; height: 34%; }
.topics_selection-split_cell_5 { background: orange; margin: 0px; height: 33%; }
.topics_selection-split_cell_6 { background: purple; margin: 0px; height: 33%; }
.topics_selection-level_1 { background: red; vertical-align:top; }
.topics_selection-level_2 { background: yellow; vertical-align:top; }
<div id="topics_selection-container">
<div class="topics_selection-level_container topics_selection-level_1">
<div class="topics_selection-split_cell_1">asdf</div>
</div>
<div class="topics_selection-level_container topics_selection-level_2">
<div class="topics_selection-split_cell_2">asdf</div>
<div class="topics_selection-split_cell_3">asdf</div>
</div>
<div class="topics_selection-level_container topics_selection-level_2">
<div class="topics_selection-split_cell_4">asdf</div>
<div class="topics_selection-split_cell_5">asdf</div>
<div class="topics_selection-split_cell_6">asdf</div>
</div>
</div>
Related
I'm playing CSS battle and trying to achieve the result perfectly, but I don't know why there is some gap at the edge of the circle as you can see on the screenshot here: Screenshot
I know there is better solution like using gradient, but I'm trying to learn to solve the problem here and improve my understanding of CSS. Below is my code:
body {
background-color: #E3516E;
}
.Container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.Circle {
width: 199px;
height: 200px;
background-color: blue;
border-radius: 50%;
overflow: hidden;
position: relative;
}
.Square {
width: 99.5px;
height: 100px;
position: absolute;
}
.Green {
background-color: #51B5A9;
}
.Yellow {
background-color: #FADE8B;
right: 0;
}
.White {
background-color: #F7F3D7;
bottom: 0;
left: 0;
}
.Transparent {
background-color: #E3516E;
bottom: 0;
right: 0;
}
<div class="Container">
<div class="Circle">
<div class="Green Square"></div>
<div class="Yellow Square"></div>
<div class="White Square"></div>
<div class="Transparent Square"></div>
</div>
</div>
There is no gap at edges. Looks like Anti-Aliasing. I have added a border to it, so that you can see there's no gap.
<div class="Container">
<div class="Circle">
<div class="Green Square"></div>
<div class="Yellow Square"></div>
<div class="White Square"></div>
<div class="Transparent Square"></div>
</div>
</div>
<style>
body {
background-color: #E3516E;
}
.Container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.Circle {
width: 199px;
height: 200px;
border-radius: 50%;
overflow: hidden;
position: relative;
}
.Square {
width: 99.5px;
height: 100px;
position: absolute;
}
.Green {
background-color: #51B5A9;
}
.Yellow {
background-color: #FADE8B;
right: 0;
}
.White {
background-color: #F7F3D7;
bottom: 0;
left: 0;
}
.Transparent {
background-color: #E3516E;
border: 1px blue solid;
bottom: 0;
right: 0;
}
</style>
A conic gradient can do it:
.box {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(#FADE8B 25%, #0000 0 50%, #F7F3D7 0 75%, #51B5A9 0)
}
body {
background: #E3516E;
}
<div class="box"></div>
Current Situation
Using the following code I show a couple of divs floated to the left.
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100%;
}
.header {
height: 80px;
position: fixed;
width: 100%;
background: green;
}
.inner-container {
position: absolute;
top: 80px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: auto;
white-space: nowrap;
}
.column {
height: 500px;
width: 150px;
background: red;
float: left;
margin: 5px;
}
<div class="container">
<div class="header">
</div>
<div class="inner-container">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>
Current result:
Problem
What I want is that the red boxes don't wrap within its container. I want both, a vertical and horizontal scroll bar if the space is not enough. For the vertical scrollbar it works. What am I missing?
JSFiddle: https://jsfiddle.net/brainchest/j6zh400v/
A fix I found was to change the .column from being a float: left to display: inline-block. This treats each column as a "word" (like a word in text) and thus the white-space: no-wrap; applies. Otherwise, the float: left changes the way the element gets positioned.
Edited Fiddle: https://jsfiddle.net/9bo4f5pv/
Use display: flex on the parent, then flex: 0 0 150px on the columns.
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100%;
}
.header {
height: 80px;
position: fixed;
width: 100%;
background: green;
}
.inner-container {
position: absolute;
top: 80px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: auto;
display: flex;
}
.column {
height: 500px;
flex: 0 0 150px;
background: red;
margin: 5px;
}
<div class="container">
<div class="header">
</div>
<div class="inner-container">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>
I need to hide the .content-section when going out the limit of #page.
I need to use overflow:hidden; but I cannot get the desired result applying on #page.
Any idea how to fix it?
http://jsfiddle.net/Pet8X/1/
<div id="btn-up" onclick="moveUp();">UP</div>
<div id="btn-down" onclick="moveDown();">DOWN</div>
<div id="page">
<div id="bar-header">Header</div>
<div id="content">
<div class="content-section item1 ">
<a name="anchor-1"></a>
<h2>Content 1</h2>
</div>
<div class="content-section item2">
<a name="anchor-2"></a>
<h2>Content 2</h2>
</div>
<div class="content-section item3">
<a name="anchor-3"></a>
<h2>Content 3</h2>
</div>
<div class="content-section item4">
<a name="anchor-4"></a>
<h2>Content 4</h2>
</div>
</div>
<div id="bar-footer">Footer</div>
</div>
/*resetter */
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background: transparent;
width: 500px;
height: 200px;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#bar-header, #bar-footer {
position: fixed;
left: 0px;
width: 500px;
height: 30px;
z-index: 100;
background-color: rgba(50,50,50,0.5);
text-align: center;
}
#bar-header {
top: 0px;
}
#bar-footer {
top: 690px;
}
#btn-up, #btn-down {
position: fixed;
left: 1230px;
width: 50px;
height: 50px;
background-color: yellow;
outline: 1px solid black;
z-index: 200;
}
#btn-up {
top: 0px;
}
#btn-down {
top: 50px;
}
#content {
position: fixed;
}
#content-inner {
overflow: hidden;
}
.content-section {
background-color: lightgray;
outline: 1px solid black;
width: 50px;
}
/* content sizes */
.item1 { /* top is 0 */
height: 200px;
}
.item2 { /* top is 200 */
height: 400px;
}
.item3 { /* top is 600 */
height: 600px;
}
.item4 {
height: 800px;
}
.content-section h2 {
position: relative;
top: 30px; /**avoid to go under the header bar*/
}
.active {
background-color: violet !important;
}
You are referencing the ID of the sidebar container incorrectly.
Your rule states
#content {
position: fixed;
}
#content-inner {
overflow: hidden;
}
But there is no element #content-inner.
Use this instead:
#content{
position: fixed;
overflow: hidden;
}
This results in:
Fiddle
Just apply overflow-hidden to #content
#content{
position: fixed;
overflow: hidden;
}
I found this solution to centering my div vertically and horizontally. However if I fill in the content section past the length defined for the div it will run outside of it. I was hoping to make it expand depending on the content inside the div. How do I make it so this can happen?
JSFIDDLE
HTML:
<body>
<div id="wrapper">
<div id="headerwrapper">
<div id="header" class="center">header</div>
</div>
<div id="titlewrapper">
<div id="title" class="center">title</div>
</div>
<div id="contentwrapper">
<div id="content" class="center">content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br></div>
</div>
<div id="footerwrapper">
<div id="locationwrapper">
<div id="location" class="center">location</div>
</div>
<div id="copyrightwrapper">
<div id="copyright" class="center">copyright</div>
</div>
</div>
</div>
</body>
CSS:
html body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.center {
position: relative;
top: 50%;
transform: translateY(-50%);
margin-right: auto;
margin-left: auto;
width: 100%;
height: 100%
max-width: 5em;
}
#wrapper {
background-color: pink;
height: 100%;
width: 100%;
}
#headerwrapper {
background-color: green;
width: 100%;
height: 8em;
}
#header {
color: white;
background-color: black;
}
#titlewrapper {
background-color: red;
width: 100%;
height: 8em;
}
#title {
color: white;
background-color: black;
}
#contentwrapper {
background-color: blue;
width: 100%;
height: 8em;
}
#content {
color: white;
background-color: black;
}
#locationwrapper {
background-color: yellow;
width: 100%;
height: 8em;
}
#location {
color: white;
background-color: black;
}
#footerwrapper {
background-color: brown;
width: 100%;
height: 100%;
}
#copyrightwrapper {
background-color: green;
width: 100%;
height: 8em;
}
#copyright {
color: white;
background-color: black;
}
If you want the "content" sections to dynamically adjust height, take off the fixed height.
Change:
#contentwrapper {
background-color: blue;
width: 100%;
height: 8em;
}
To:
#contentwrapper {
background-color: blue;
width: 100%;
}
Working fiddle to your requirement: http://jsfiddle.net/k5YUu/6/
Im here because other similar questions couldn't help my particular problem.
How can #right div height making 100% ?
Only css solution needing. Thanks.
http://jsfiddle.net/elturko/86nX9/
HTML
<div id="wrap">
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrap{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
background:#ddd
}
#header{
height:104px;
background:#d5a1b3;
}
#left{
float:left;
width:219px;
background:#a2d025;
}
#right{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
overflow:hidden;
background:#FFF;
margin:0 15px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
padding:14px;
}
#footer{
clear:both;
height:15px;
background:#ed653a;
}
Here's 2 Pure CSS solution
Without fixing any height (header/footer) or width (left column).
I actually prefer the second solution. (even tho he has less browser support)
1 - using CSS tricks
this is a totally responsive design and work well with all browsers (IE10, FF, Chrome, Safari, Opera, mobile browsers)
Working Fiddle
HTML:
<div class="Container">
<div class="Header">
</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">
</div>
</div>
<div class="HeightTaker">
<div class="Wrapper">
<div class="LeftMenu">
</div>
<div class="Content">
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Inverse, .Inverse > *
{
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.LeftMenu
{
height: 100%;
float: left;
}
.Content
{
overflow: auto;
height: 100%;
}
/*For demonstration only*/
p
{
font-size: 1.3em;
}
.Important
{
font-weight: bolder;
color: white;
}
body > .Container
{
text-align: center;
}
.Header
{
background-color: #bf5b5b;
}
.LeftMenu
{
background-color: #bdbe4c;
}
.Content
{
background-color: #90adc1;
}
.Footer
{
background-color: #b5a8b7;
}
2 - using Flex
This layout can also be achieved using flex, but the current browser support is pure.
Here's a Working Fiddle only FF,Chrome,IE10.
HTML: (simpler)
<header>
</header>
<section class="Middle">
<div class="LeftMenu">
</div>
<div class="Content">
</div>
</section>
<footer>
</footer>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
text-align: center;
}
body
{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.Middle
{
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 0;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
.Content
{
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 0 0;
overflow: auto;
}
/*For demonstration only*/
p
{
font-size: 1.3em;
}
.Important
{
font-weight: bolder;
color: white;
}
header
{
background-color: #bf5b5b;
}
.LeftMenu
{
background-color: #bdbe4c;
}
.Content
{
background-color: #90adc1;
}
footer
{
background-color: #b5a8b7;
}
Take this out of css for #right{} :
margin:0 15px;
This will make it wide 100%. I'm a little confused on the 100% height. Did you meant wide?
Important will over-ride other CSS attributes and auto will make the div as large as it needs to be to fit the contents.
height: auto !important;
height: 100%;
Try this:
#right{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
overflow:hidden;
background:#FFF;
margin:0 15px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
padding:14px;
top: 0px;
bottom: 0px;
}
Add top: 0px; bottom: 0px; to your #right css
I restructured your html a bit. Is that your desired outcome?
jsfiddle
<div id="container">
<div id="wrap">
<div id="header">
header
</div>
<div id="body">
<div id="left">
left
</div>
<div id="right">
right<br>
right<br>
right<br>
right<br>
right<br>
</div>
</div>
</div>
</div>
<div id="footer">
<p>footer</p>
</div>
css
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
#container {
height: 100%;
height: auto !important;
min-height: 100%;
}
#wrap {
overflow: auto;
padding-bottom: 16px;
}
#header {
height: 104px;
background:#d5a1b3;
border-bottom: 1px solid #000;
}
#body {
overflow: hidden;
height: 100%;
}
#right {
margin: 0px 0px 0px 220px;
background:#FFF;
}
#left {
width: 219px;
float: left;
background:#a2d025;
}
#footer {
background:#ed653a;
border-top: 1px solid #000;
position: relative;
height: 20px;
margin-top: -21px;
clear: both;
}
#footer p {
margin: 0px;
}