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

Nonobedience

Its hard to know without seeing the original problem. I would suggest you post a comment on that question's accepted answer? – Gnni

Where is the non-floated div in the live demo? – Outgoing

@Outgoing the non-floated div in the live demo is #fluidColumnContainer – Nonobedience

Hmm, I can't seem to find the float rules for that. Are you certain? (I could just be blind) – Outgoing

I updated the live demo link. The CSS rule for #fluidColumnContainer is #fluidColumnContainer { padding: 0 200px 0 0 }. That's all. – Nonobedience

nevermind - I was a little confused about the issue. – Outgoing

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.

Outgoing

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... – Nonobedience

Answer 2

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

Lassiter

So you're saying that floating something inside the non-float div makes a difference? Wow. – Nonobedience

@hyuz: that depends on the block context of elements involved... – Hannan