Simple Clearing of Floats
Without wanting to stray too deeply in Simon and Stuartâs technical CSS territory, I thought this was worth noting.
For all itâs many advantages, sometimes itâs the little things that CSS layout makes difficult that really get to you. Clearing floated elements is a good example.
The Problem:
One of the simplest and most common layout structures involves the placing of a small, set-width DIV â perhaps navigation, a quote or a bio â within a larger wrapping DIV that contains the remaining content. In a markup this might be something like:
<div id="outer">
<div id="inner"> <h2>A Column</h2> </div>
<h1>Main Content</h1>
<p>Lorem ipsum</p>
</div>
We can set the width of â#innerâ (letâs say âwidth:20%â), but, being a block level element, the main content will always wrap beneath, unless we float it (either left or right). Here our classic problem begins.
If â#innerâ is shorter than #outer, all is well.
However, if â#innerâ grows taller than itâs wrapping parent, it breaks through the bottom edge of â#outerâ. Itâs as if â#outerâ forgets itâs supposed to be keeping tabs on what â#innerâ is doing as soon as you float it.
As we canât always control the amount of content in these DIVs, it certainly presents a problem. Hereâs a typical example of the problem in action. (Thanks to Pixy for the neat little content-gen script).
The Solutions:
a) The Markup Method: The first and W3C-recommended approach is a little ugly â extra markup. At the very end of your content, toss in a cleared element â typically something like <br style="clear:both"/>
. Itâs the HTML equivalent of wedging matchsticks into your window frame to jam a window open. This works, but âdirties your pageâ with stuff that only exist so it renders properly.
b) The Aslett/PIE Method: Less than 12 months ago Tony Aslett working with PositionIsEverything.com came out with a new method so diabolically clever that they had to have been sitting in a fake island volcano, stroking a large white cat and laughing fiendishly when they thought of it.
Youâll need to read the tutorial to get the full story, but, in short, they use a little-known, rarely-used pseudo class (:after) to place a hidden, cleared full-stop after the content. Combined with a sprinkling of hacks, this works beautifully â but gives me a headache over my left eye when I think about it.
c) The Ordered List Method: Last October Steve Smith from Orderlist.com published a slightly simpler method. Again, read his tutorial to get the low-down, but in short, his method involves âFloating nearly Everythingâ (FnE), which naturally enough includes the outer DIV. This can have a considerable effect on the way your design stacks and as Steve says âit takes a little more tweakingâ but in general this method seems a little more robust to me.
d) That was my âcurrent state of playâ until last week when SitePoint Forumâs own CSS Guru, Paul OâBrien, nonchalantly pointed out that adding a âoverflow:autoâ to the outer DIV did the trick.
âRubbishâ I thought to myself.
Half an hour of testing later, I was amazed to find Paul was 100% correct â as this example shows. It seems that reminding the outer DIV that itâs overflow is set to âautoâ, forces it to think âoh yeah.. Iâm wrapping that thing, arenât I?â.
This fact is so boringly simple that itâs hard to know if thousands of developers are well aware of it, but never thought to mention it. I know I showed the example page to four CSS-savvy SitePoint colleagues and all shock their heads, blinked slowly and said âWhaaâŠ?â (or something similar).
From my testing, it seems to work identically in virtually every browser. Even IE4 seems to love it â only NS4 freaks out, and Iâm not totally convinced a few hacks couldnât get that working.
We havenât had time yet to thoroughly test this method under rigorous match conditions, but so far there donât seem to be any major drawbacks.
Certain combinations of margin and padding can force internal scrollbars. If you canât âmassageâ them away, we found âoverflow:hiddenâ has virtually the same effect without the scrollbars. The only drawback of âhiddenâ seems to be the cropping of some images if theyâre placed lower in the page.
Both issues seem very manageable.
Nice work, Paul.