Web

Simple Clearing of Floats

    Alex Walker
    Share

    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.