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