CSS: Floats – the duct-tape of the web
The CSS attribute “Float” is one of the most frustrating, yet useful attributes for styling the web. The number of times that annoying space, weirdly position element or randomly padded area can be fixed simply by using a float is one element of the web that you truly need to get a feel for. It’s not entirely predictable in its behaviour, even in the ‘standards compliant’ Mozilla browsers, although it is getting better.
But, like duct-tape, it can wear out, working in weird and not so wonderful ways. Such as Internet Explorer 6’s little habit of repeating the last few letters or words of a <div>tag every so often – fixed by using a second hidden div, that’s got lots of spaces in it. Or, the way that Mozilla based browsers sometimes forget to show the background unless the element is floated, even if the value is “none”. And the latest and greatest problem was an entire browser crash due to floated elements and hidden form fields – I think we may be the pioneers on this particular problem.
Over the years, I’ve learnt to manipulate and predict how these seemingly untamable beasts will behave, but on occasions this has meant re-writing the entire style sheet for a site, taking floats out, adding them in. Checking the widths and margins, trying desperately to find where that one elusive pixel is.
Floats are great though, and some of the things they enable you to do make it well worth the pain of learning how to use them, for a fully Web 2.0, CSS driven site.
