Why does order of float div and non-float div matter only in some cases?

Question

I have a similar problem as CSS Auto Margin pushing down other elements: A right floating sidebar gets pushed down below the main non-floating content div. The answer proposed works: just reverse the order of the markup and write out the float div before the non-float div.

For example, this:

<div class="container">
    <div id="non-floating-content">
        fooburg content
    </div>
    <div id="float-right">
        test right
    </div>
</div>

needs to be awkwardly re-ordered as:

<div class="container">
    <div id="float-right">
        test right
    </div>
    <div id="non-floating-content">
        fooburg content
    </div>
</div>

So then, why does this also work without reordering: Elastic layout with max-width and min-width using grid based design? Check out the live demo. The ordering of the markup is still sensible: the float div is written out after the non-float div. Yet the float doesn't get pushed down on the page.

I ask because I would prefer not to have to hack the theme PHP (to reorder divs) in order to properly style it.

Other posts that also say the solution is to "re-order your divs":

Its hard to know without seeing the original problem. I would suggest you post a comment on that question's accepted answer? — James Khoury, Jul 06 '11 at 03:09
@kinakuta the non-floated div in the live demo is #fluidColumnContainer — huyz, Jul 06 '11 at 03:12
Hmm, I can't seem to find the float rules for that. Are you certain? (I could just be blind) — kinakuta, Jul 06 '11 at 03:15
I updated the [live demo](http://jsbin.com/ozilo4/edit) link. The CSS rule for #fluidColumnContainer is `#fluidColumnContainer { padding: 0 200px 0 0 }`. That's all. — huyz, Jul 06 '11 at 03:19

score 3 · Accepted Answer · answered Jul 06 '11 at 03:35

3

The reason this works is because your containing element has no height. When you have nothing but floated elements inside a containing element, it will collapse to 0 height. If you were, for example, to add overflow: hidden; to #fluidColumnContainer, it would act as a clear-fix, expanding the container to contain the floated elements. Then you would see the right-floated element drop down again.

answered Jul 06 '11 at 03:35

kinakuta

9,029
1
39
48

Ah cool, that makes sense; I didn't even notice the collapsed container. Thanks a lot! Let's see if this new knowledge helps me fix my site... – huyz Jul 06 '11 at 03:52

score 0 · Answer 2 · answered Jul 06 '11 at 03:11

0

the reason the one you linked works is because the other columns are also floated

answered Jul 06 '11 at 03:11

Gilsham

2,276
2
13
14

So you're saying that floating something *inside* the non-float div makes a difference? Wow. – huyz Jul 06 '11 at 03:13
1

@hyuz: that depends on the [block context](http://stackoverflow.com/questions/6196725/how-does-the-css-block-formatting-context-work) of elements involved... – prodigitalson Jul 06 '11 at 03:20

Why does order of float div and non-float div matter only in some cases?

2 Answers2

Linked