Effect of overflow:auto on floated divs

Question

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?

r u expecting second div to wrap the text to second line of the second div? — Sowmya, Dec 11 '12 at 07:54
Yes, I see now that my use of the word wrap is misleading. By "wrap" I meant wrapping UNDER the first div. I will try to find a better phrasing and edit the post. — John Fitzpatrick, Dec 11 '12 at 07:56
I like how nobody actually tried to answer the question at hand. — BoltClock, Dec 11 '12 at 08:29
@BoltClock: Yes I noticed that. But they WERE trying to be helpful nonetheless. Thanks for actually answering the question. — John Fitzpatrick, Dec 11 '12 at 08:38

score 1 · Answer 1 · answered Dec 11 '12 at 07:56

1

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/

answered Dec 11 '12 at 07:56

Ladineko

1,921
1
16
25

I forgot to mention that before trying `overflow:auto` I tried left floating the second `div`. There was an undesired effect with that. When I made the browser too narrow, the right `div` moved down under the left `div`. But I want the `div` on the right to stay to the right of the left `div` regardless of the width of the browser. – John Fitzpatrick Dec 11 '12 at 08:04
It is depending on the width of the parent div. If the parent has a width of 200 px then both childeren may not get higher then 200px. In other words : 100 + 100 = 200. is correct.... 150+100 = 250 = overflow, and then the right div will fall below the left one. If you want to stay next to each other then use 50% on both. – Ladineko Dec 11 '12 at 08:08
Oh! Now I see what you mean. Thanks! – John Fitzpatrick Dec 11 '12 at 08:09

score 1 · Answer 2 · answered Dec 11 '12 at 07:59

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

score 1 · Answer 3 · answered Dec 11 '12 at 08:00

1

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>

answered Dec 11 '12 at 08:00

Santosh Shelke

562
2
6
19

As I commented in another response, left floating both `div`s causes the second `div` to appear under the first `div` if the browser is too narrow to show them next to each other. But I want the second `div` to always be on the right regardless of browser width. – John Fitzpatrick Dec 11 '12 at 08:06

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

Effect of overflow:auto on floated divs

4 Answers4