Effect of overflow:auto on floated divs - css

Short version: Why does overflow:auto cause a div to the right of a left floated div not to wrap its text around the left floated div? (Bonus: Is this an acceptable way to accomplish a column effect?)
Long version...
I have two divs that I wish to be next to each other, and displayed as columns. The div on the left has a specific width and height. And the div on the left is shorter than the div on the right. However, I do not want the text in the right div to wrap under the left div.
Here was my first attempt...
<div>
<div style="border:1px solid grey;
width:100px;
height:100px;
float:left;">
Div on the left.
</div>
<div>
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
...I knew the text in the right div would wrap under the left div. And it did.
Then I remembered a page I had created that had a column effect. I had copied and pasted it from I know not where. All it did was assign overflow:auto to the div on the right. It looks like this...
<div>
<div style="border:1px solid grey;
width:100px;
height:100px;
float:left;">
Div on the left.
</div>
<div style="overflow:auto">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
Voila, the right divs text no longer wrapped under the first (left) div! The second (right) div appeared as a column.
So, I read everything I could find on overflow:auto and found no mention of why I should see this behaviour. Can anyone explain it to me?
Also, is this an acceptable way to achieve a column effect?

overflow: auto (or anything but visible) causes your second div to create a new block formatting context. This means the text within that div is now in its own formatting context, rather than sharing the same one as your first, left-floating div (which is the containing block of both divs), and so it is no longer allowed to flow around the first div.
Floats also generate their own BFCs, but that doesn't exactly relate to the matter at hand. It does however also prevent reflow, achieving a column effect, as shown in the other answers.
Is this an acceptable way of creating a column effect? I don't know, but it does seem unconventional. You can just float the second div as well instead for the reason mentioned above (although even that, in favor of upcoming true layout modes like flexbox and grids, is now seen as a browser compatibility hack these days, but is the best we've got for the time being).
Remember that inline content is designed to be able to flow naturally around floated content; see CSS2.1, §9.5 Floats.
Remember also that the purpose of overflow is to control content overflow in a box with a limited size. That it causes a box to create a new BFC, influencing floats as a result, is but a side effect, the reason for which is explored here. It's a lengthy read, but it includes a bit about preventing reflow, which I'll quote here for ease of reference:
And so, this change was brought about in CSS2.1, documented here. Now if you apply an overflow value other than visible only to the second box, what a browser does is push the entire box aside to make way for the float, because the box now creates a new block formatting context that encloses its contents, instead of flowing around the float. Here's what it looks like with overflow: auto for example:
Note that there is no clearance; if the second box had clear: left or clear: both it would be pushed down, not to the side, regardless of whether it established its own BFC.
By the way, yes, this means your clearing div needs to be there if you want to always clear the first div.

To get the divs next to each other they both will need a float and fit in the surrounding div.
Example:
<div style="width:200px;">
<div style="width:100px; float:left;">
content
</div>
<div style="width:100px; float:left;">
content
</div>
</div>
If you want the outlining div to grow with the largest div place overflow:hidden; to the div.. If that div doesnt have a height with it then it will scale with the larges div.
Preview:
http://jsfiddle.net/WzVBE/

Remove float:left from the first div.
<div>
<div style="border:1px solid grey; width:100px; height:100px;">
Div on the left.
</div>
<div style="overflow:auto; ">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>​
DEMO

You can try this
<div style="width:800px; background-color:#CCC">
<div style="width:300px; height:100px; float:left; background-color:#CCC">
Div on the left.
</div>
<div style="height:100px; float:left; width:500px; background-color:#999">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>

Related

Why does the parent DIV resize while there is still room for the child element to move down?

sorry if this question looks duplicate, but those explanations were in some way different from what I was looking for.
I have a DIV that is displayed a table. It has two DIVs as cells which also have their own DIVs inside.
<div class="theTable">
<div class="theRow">
<div class="cell1">
<div class="cell1Content">
cell one content
</div>
</div>
<div class="cell2">
<div class="cell2Content">
cell two content
</div>
</div>
</div>
</div>
Now, when by any means (such as writing, or changing attributes), I enlarge the content of one of these cells (say cell2) instead of the content being enlarged from downward, and filling the area of the parent DIV (which is a cell), what happens is that the parent DIV actually expands from top. This behavior is not desired. I want the parent DIV to stay the same size, and the content to resize from bottom (downward).
I know this can be achieved using, position:relative, top:2em, but that's not what I am intending to do, because I do not want to disrupt the flow of the document, rather a simple answer as to how to get round this problem.
As in the case above, the CSS file is like this:
.theTable {display:table}
.theRow {display:table-row;}
.cell1 {display:table-cell}
.cell2 {display:table-cell}
.cell1Content {display:block; height:10em; background:blue;}
.cell2Content {display:block; background:yellow; height:5em; margin-top:2em;}
If you change the last line (margin-top:0em) you'll see, it is not only the child that is changing size, but also the parent. I don't understand why? And what can be done about it?
So what you want is that the cells start from bottom to grow upwards right?
Something like this could solve it:
http://jsfiddle.net/7y19n8eh/
.theTable {display:table}
.theRow {display:table-row;}
.cell1 {display:table-cell;vertical-align: bottom}
.cell2 {display:table-cell;vertical-align: bottom}
.cell1Content {display:block; height:10em; background:blue;}
.cell2Content {display:block; background:yellow; height:5em; margin-top:2em;}
What I did was to add vertical-align:bottom to the cells.
The vertical-align property sets the vertical alignment of an element and is compatible with all major browsers.

Position DIVs in same place, toggle them

I'm having a little issue with couple of DIVs.
I need two DIVs to be positioned in exactly same place, and toggle them. As one div disappear, another should appear. This I will do using jQuery toggle().
The issue is that both DIVs should be part of the page flow and positioned exactly the same way. How I would achieve that?
So, there is some previous div, that occupies some place, has relative positioning and non-fixed sizes (dependent on window measures)
<div class="header">
... </div>
Then my div
<div id="galleria" style="height:700px;width:920px; margin:0 auto; border:1px solid green; ">
... </div>
and other my DIV
<div id="aboutDiv" >
This is ABOUT
</div>
Two later divs should occupy the same place. What positioning tags I could use?
The design adjusts to the window size due to flexible element -- very first DIV "header", so no absolute positioning is possible.
just put them one after another
<div id="galleria" style="height:700px;width:920px; margin:0 auto; border:1px solid green; "> ... </div>
<div id="aboutDiv" >
This is ABOUT
</div>
both should be positioned relative , when one is hidden then other will move up and they will be in the same place - as long as you are using toggle to always have one hidden and one shown
You either need a relatively positioned parent container with absolutely positioned children, or hide one and show the other when its faded out completely

position div behind two float divs

I have two divs, one with float: left and the other one with float:right. They display side-by-side, but when I add a third div it displays over the two floating divs and not behind as i'm trying to.
<div id="left_side" style="float:left;" ></div>
<div id="right_side" style="float:right;" ></div>
<div id="below_side" ></div>
What I want to do: http://dl.dropbox.com/u/20836988/intended.png
what I actually get: http://dl.dropbox.com/u/20836988/what%20i%20get.png
I've tried adding vertical-align: bottom to the last div without results. Also I've tried adding a div containing the two float divs and then the third div but I always get the same result. I'm sure it must be a very basic question but I can't find the answer anywhere...
below_side needs a float and a clear:both;
currently left and right are floated - which takes them out of the document flow. which means that below side ends up in the wrong spot.
if you put the float: left on the below-side it will also take it out of the docment flow and put it in the same space as the left and right (relatively) then you add the clear: both so that it appears below left and right
<div id="left_side" style="float:left; background-color:#ccc" >gdfgfdg</div>
<div id="right_side" style="float:right;background-color:red" >gfdgfkjkjhkjhkjh</div>
<div id="below_side" style="background-color:#000; z-index:1000; float:left; color:#FFF;" >dsfdfds</div>
Add clear: both to your below_side div.
See this link.

CSS float arbitrarily wrapping non-quirks mode despite having room

I have come across a weird problem where floated elements wrap to the next line when there is still plenty of space for them.
I realize this can be solved by removing the < p > or the < div > but I want clean valid code.
Most importantly I want to know why this is happening.
HTML:
<div class="section" style="width: 8000px;">
<div style="" class="bottom">
<div class="img6"></div>
<p class="n">
</p>
</div>
</div>
CSS:
p.n{margin:0;}
div.section{width: 8000px;}
div.section:after{content:"";display:block;clear:left;}
div.section div{float:left;}
a.b{display:block;float:left;}
div.img6{background:#933;width:78px;height:15px;}
a.t1{background:#123;width:74px;height:15px;}
a.t2{background:#456;width:86px;height:15px;}
a.t3{background:#555;width:92px;height:15px;}
a.t4{background:#786;width:126px;height:15px;}
Or you can see it here at JSbin
One interesting thing worth noting is that no matter how many elements you add only the last one is wrapped.
This is happening because the p is not floated left. If you inspect the elements with for example firebug, you will see that the wrapper div.bottom has the exact width of it´s largest, unfloated, block level element, p.n, 378px.
If you float p.n as well, your problem is solved.
The problem is that floating the .bottom div left reduces its width and therefore everything it contains. Try changing div.section div {float: left} to div.bottom div {float:left}.
If you need to float everything, consider floating the external content right and/or specify fixed widths.

Why float behave differently than other options when we give float to parent element to clear float?

In this example http://jsbin.com/inoka4 no width is defined for parent element
if i want to wrap red boxes in container border.
then we can make this in 5 ways
to giving float also to <div class="container">
overflow:hidden or overflow:auto
any clearfix hack to <div class="container clearfix">
Giving height to <div class="container">
adding one more html element (for example another div or <br >) after 2
boxes in <div class="container"> enter code hereand give
clear:leftor:bothor:right` to that
element
my question is any other option except float do not make any changes in <div class="container"> and inner boxes width. but if we use float:left or right to parent box then it's shrink the whole box and inner-boxes as well.
Why?
example link: http://jsbin.com/inoka4
Edit: My question is not about which method i should use, the question is why Float shrink the width
I think the better option is to use overflow:hidden. It is a simple one line change and it works.
div#container {
...
overflow: hidden;
}
Adding extra divs for clear fix requires changes in html for something that is really css. Alternatively, when using clear fix by doing hacks like...
div:after {
content:....
...
}
your css just gets bigger and messier. But it still is a good option (especially when you need to have things that overflow the box)
Reference:
http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/
If you dont' use float on the container it's width is set to 100%. If you add a floating, it only takes the space it needs. In this case the width is calculated by the two divs inside.
To wrap the red boxes in the container border there is not other option except adding float to the container. The only other option would be to absolutely position all the elements but in this case you have to know the width and height of all elements in advance. So that really isn't an option.
So my advice is to use float on the container and add a clear: both on the element after the container.
Your best bet is to always clear your floats. Just after you close the div with class .right, and just before you close the div with class .container, add a new div like this:
<div class="clear"></div>
.clear is just {clear:both;} in your stylesheet. That's what I use all day long, and works like a treat.
The final markup would be:
<div class="container">
<div class="left"> ... </div>
<div class="right"> ... </div>
<div class="clear"></div>
</div>
Edit: Just like your last example, apparently. :)

Resources