When it comes to CSS-based layouts, there are basically two techniques: floated elements and absolute positioning. And, each has its advantages and disadvantages.

Floats:

• Advantage: Elements can’t accidentally overlap one-another (if you’ve implemented the floats correctly).
• Disadvantage: The nuances of floats can be difficult to understand for new developers.
• Disadvantage: Nested floated & cleared elements doesn’t really work in current browsers (well, more about this below).

Absolute Positioning:

• Advantage: For the most part, they work as you would expect them to.
• Disadvantage: In unusual circumstances — such as perhaps a content area being shorter than a navigation menu — absolutely positioned elements can unintendedly overlap other elements.

Floated elements are desirable in many situations as they’re generally more robust, once in place — unlike absolutely positioned elements which could overflow on top of another element. And, suppose that you floated a navigation menu down the left side of the page while leaving the content area in-flow (so far, so good).

Then, if you floated an image within the content area, you could try clearing the element following it to force that element below the image — but unfortunately that would clear across the entire page, pushing that cleared element below all floated elements, including the navigation menu floated down the left side of the page.

With that limitation, developers have resorted to tricks such as absolutely positioning a navigation menu just so that they would be able to float & clear within the content area with impunity. However, I came across a new technique — made up of a combination of existing techniques — that allows float clearing within the content area of a page while not disturbing floated elements outside the content area (such as a floated navigation menu).

One of the components is Tony Aslett’s auto-clearing floats technique. Since floated elements can expand beyond their parent containers, developers using floats would often need to add additional — perhaps unsemantic — elements just to clear floated elements so as to prevent that. But, the auto-clearing floats technique allows container elements to automatically expand to enclose any floated children, without extra markup (this, in itself, was significant).

Then, Roger Johansson at 456 Berea Street postulated that this technique could be used as a basis to allow clearing floated elements within the content area of the page (without disturbing other floated elements elsewhere). And it worked! The trick is to float the body area of the page (in addition to any other floated elements). Then, if clearing is needed within the body, you can use the auto-clearing technique to clear past floated elements within the body without also clearing past other floated elements on the page (such as a navigation menu down one side).

Here’s how some example CSS code might look:

And, the HTML to go with that CSS would be something like this:

If this technique wasn’t used and if the paragraph was cleared to push it under the image, the paragraph would just end up below the navigation menu. But, thanks this new technique, floats can be cleared within the extent of their container element.

I’ve already used this technique on some pages which I’ve written recently and it’s worked great. And, this also works well alongside the source ordered floats technique which allows floated columns to appear in any arbitrary order within the source code (primarily with the idea that the content area would be listed first, for the benefit of screen readers). As CSS Layout techniques go, this one is hard to beat.