I'm a bit confused when to use overflow:hidden to make sure the the parent element wraps around other elements. I've always used the clear: both; div to do that, but it doesn't make a lot of sense semantically. Can anyone explain how overflow:hidden parent div does it's magic? And when should we prefer this technique over the clear:both method?
Cheers!
Overflow of anything but visible creates a new block formatting context which clears the floats.
When we use float : left , the problem with that is when there is enough space for the next element it will come next to the floated element to avoid that we use clear:both
eg:
<style>
#wrapper{
width:500px;
}
#one{
width:100px;
float:left;
}
#two{
width:100px;
float:left;
}
#three{
width:100px;
}
.clearfix{
clear:both;
}
</style>
<div id="wrapper">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
In the above situation totaly there is 500px space out of that one, two divs took 200px space rest there is 300px space and dv three is just 100 px . So div three will go next to div two as there is enough space. To avoid that just put a div with clear:both after div two
<div id="wrapper">
<div id="one"></div>
<div id="two"></div>
<div class="clearfix"></div>
<div id="three"></div>
</div>
Related
If I have some HTML:
<div class="wrapper">
<div class="first"> </div>
<div class="second"> </div>
</div>
And some CSS:
.wrapper{
font-size:0px;
padding-top:200px;
background:rgba(255,0,0,.2);
}
.first{
display:inline-block;
width:25%;
height:300px;/*Actually the height will be dependent on text.*/
background:black;
position:relative;
bottom:100px;
}
.second{
display:inline-block;
width:75%;
height:100px;/*Height actually dependent on text*/
background:green;
}
NOTE: The heights are not really fixed. They are dependent on text.
See JSFiddle here.
How do I make the wrapper only wrap the contents and not wrap the space that remains when you move the column up? I want there to be no pink underneath the black column.
I tried every combination of overflow:auto/hidden/visible/etc I could think of, and I googled and found information that it's not possible to do with position:absolute, but I couldn't find anything regarding position:relative.
Thanks!
You can try adding margin-bottom:-100px; to this code(to .first class).
I'm trying to play with positioning in css and I noticed something that confused me. It's probably a dumb question...but I'm having trouble understanding it.
I created three divs with the width and height of 50px with different background colors. When I position the third div up -60px using margin-top, the third div is on top of the second div. However, when I make the first and second divs inline elements, then both the first two divs are now on top of the third one.
Can someone please explain this concept to me?
<head>
<style>
<!-- Divs with the same width and height. Second one where both the first two divs are inline below this one. -->
#one{
background-color:red;
width:50px;
height:50px;
}
#two{background-color:blue;
width:50px;
height:50px;
}
#three{background-color:green;
width:50px;
height:50px;
margin-top:-60px;
}
</style>
</head>
<body>
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
</body>
<head>
<style>
<!-- First two divs are inline -->
#one{
background-color:red;
width:50px;
height:50px;
}
#two{background-color:blue;
width:50px;
height:50px;
}
#one, #two{display:inline-block;}
#three{background-color:green;
width:50px;
height:50px;
margin-top:-60px;
}
</style>
</head>
<body>
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
</body>
I think there are two issues going on here. One is that by leaving the third div display:block it will naturally wrap the first two divs. For a quick primer on blockvs inline-block see here.
The second part of this is that you have margin-top: -60px while having height: 50px. The negative margin is basically moving it higher up the page. This means the green box will apear 10px higher than the red one (-60 + 50 = -10).
Example Fiddle - I've added margin-left: -5px; and you can see the third div peeking out from under the first.
I sometimes get confused with divs when I try and build a little more complicated layout than normal.
I have made a quick example showing what my current problem is:
EDIT: UPDATED jsFIDDLE
Sorry, it's a little messy, but I'm just trying to get it to work. As you can see, I have forced a height on one of the vertical lines (but thats ok. that line is supposed to be fixed height). The vertical line I have problems with is the one between "Pictures for download" and "videos for download"
http://jsfiddle.net/GLjND/
<div id="wrapper">
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</div>
I have lots of div's, and I guess my problem lies within some parent somewhere, but I cant figure it out.
Basically I have a wrapper,and I have 2 areas of content. In this example, those are "first" and "third".
The "second" is a vertical dotted line that I want to stick in-between these to areas, and the height of this div (which contains a vertical dotted image with repeat-y) should matsh the height of the wrapper, which in turn is defined by the largest of the two other divs ("first" and "third").
How would I do this?
Thanks in advance! :)
Here you go.
http://jsfiddle.net/GLjND/3/ (the yellow background is just so you can see the new div)
Just give the divs
display: table-cell
and you're done.
Here it is - fiddle
<div id="wrapper">
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</div>
body{
padding:0;
margin:0;
}
#wrapper{
width:500px;
height:auto;
background:red;
}
#first{
display: table-cell;
width:230px;
height:300px;
background:blue;
}
#second{
display: table-cell;
background:white;
border-left: thick dotted #ff0000;
}
#third{
display: table-cell;
width:270px;
height:350px;
background:green;
}
When you are using float property, i recommend you to set overflow:hidden to the parent div
#wrapper{
overflow:hidden;
}
And for the #second u have set the height to 100%, for this to work u should fix an height for the parent div
#wrapper{
height:400px;
}
Here is the Jsfiddle
Hope this will a good solution and will be more informative
Just give the CSS property:
overflow : hidden
display : table-cell
Derived from an actual problem with borders and margin on my site I have made this test example which I think acts a little strange:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:black;
}
.outer {
width:100px;height:100px;
}
.inner {
margin-top:40px;
height:20px;
border:1px solid red;
}
#outer-1 {
background-color:blue;
border-top:10px solid yellow;
}
#outer-2 {
background-color:green;
border-top:none;
}
#sep {
background-color:white;
}
</style>
</head>
<body>
<div id="outer-1" class="outer">
<div class="inner">
CONTENT
</div>
</div>
<div id="sep">TEST</div>
<div id="outer-2" class="outer">
<div class="inner">
CONTENT
</div>
</div>
</body>
</html>
Why does the top margin on ".inner" move "outside" when the border-top is removed in #outer-2? I would have thought the red border would have stayed inside the blue and green areas at relatively the same spot? but it doesn't.
Why? and is there a way to have it to look like I had imagined?
Because margins are evil (and tend to collapse -> is it a bug? margins of P element go outside the containig div). In your case you can simply add overflow:hidden; to .outer
http://jsfiddle.net/yhAaQ/
Your problem is that margins are exactly what the name states: they set margins to other elements, not positioning offsets. If two elements are next to eachother, with different margins, they will be placed the highest margin apart, that way both margins are satisfied. In this case, 2 margins are present with nothing separating them, so logically they collapse.
Using padding on the .outer should solve this, or relative positioning. Margins are stricly for maintaining distances to other elements.
The margin on the outer2 element is calculated from the bottom of the element above it with no top margin applied to the outer2 element. If you add border, however, it is calculated from the bottom of the border.
Also, when bottom and top margins are applied to elements that follow each other, they collapse, that is just the way the box model works.
If you want to control the offset of an element inside another element, use padding.
body{/* just a reset to simplify example */
padding:0;
margin:0
}
.inner {
margin-top:40px;
height:40px;
width:40px;
background-color:blue;
}
#outer{
background-color:green;
height:60px;
width:60px;
}
<div id="outer">
<div class="inner">
<div class="inner">
<div class="inner">
<div class="inner">
test
</div>
</div>
</div>
</div>
</div>
Above code is a more general case of the problem you mentioned. All .inner are having margin-top=40px in CSS. But in reality, since there is no border involved, all the margins just collapse down to one final margin of 40px which "bubble up" outside of root parent.
I have a simple problem with divs. How can I float 3 DIVs inside one DIV that's not floated?
Here is my code:
<div style="margin:0 auto;width:1240px;border:1px solid #000000;">
<div style="width:200px;height:50px;float:left;border:1px solid #000000;">
test
</div>
<div style="width:200px;height:50px;float:left;border:1px solid #000000;">
test
</div>
<div style="width:200px;height:50px;float:left;border:1px solid #000000;">
test
</div>
</div>
I want to float child DIVs inside this parent DIV or a way to center them without floating...display:inline-block won't work for the child divs as they are of different heights and one div is an image...so i think the best way is to float them and optimize the margins...In this case i want the parent div to be centered across the screen so i use margin:0 auto instead of float but this leads to the child div not stretching the parent div and it appears as a thin line.
You can test the fiddle I created to understand the problem:
http://jsfiddle.net/tQpM5/
Thanks
If I understand correctly, you want to center 3 boxes on the same row:
.wrapper{
margin:0 auto;
text-align:center;
vertical-align: top;
}
.box{
width:200px;
height:50px;
display:inline-block;
text-align:left;
}
HTML:
<div class="wrapper">
<div class="box"> 1 </div>
<div class="box"> 2 </div>
<div class="box"> 3 </div>
</div>
demo
Since all the child divs widths are less than that of the parents, they should naturally line up side by side. Try give each child div a position: relative; margin: auto. This way they should center themselves with in the parent
The parent div appears as a line because its contents is floating, settings its height to 1px. To resolve this you need to clear the floats after this element. Often referred to as clearfix.
.clearfix:after {
clear: both;
content: "";
display: table;
}
Then you can just float the children as normal. I used margin: auto on the parent to make it centered.
See this demo:
http://jsfiddle.net/c2NjZ/
Note for old browser support on clearfixing see:
http://css-tricks.com/snippets/css/clear-fix/
The container div's float and it's child div's float values (or no float) are independent of each other, you just need to clear the child div's before you close the parent div:
<style type="text/css">
.clearfloat {clear:both;height:0;font-size:1px;line-height:0px;}
</style>
<div class="parent">
<div class="child" style="float:left;">
Hi
</div>
<div class="child" style="float:right;">
There
</div>
<br class="clearfloat">
</div>
Update to your example: http://jsfiddle.net/tQpM5/2/
What you need is to give the parent div: overflow:hidden; so it can contain its child div.
Child divs will float beside each other, however when you re-size your browser, they will float under each other, to avoid this, you can give the parent div a min-width.
To center the parent div, you can give it a margin-left:auto; margin-right:auto;, however you must specify a width so that it does not stretch and take all its available width.
Since you chose to use floats and not inline-block, then the only thing left is to deal with margins just like you said.
DEMO