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":

• 2 column div layout: right column with fixed width, left fluid
• Semi Fluid Layout CSS/Html

Answer 1

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.