Simple, Easy CSS Float Solution
Most of us who use CSS all the time can tend to overlook the simple solutions to solving issues that come up when writing clean, XHTML/CSS code. One of the biggest concerns designers run into is cross-browser implementation of floats. In a recent NetTuts article, various CSS issues were addressed, including float.
In the comments, I found this nugget:
From Jeffrey Way
Here is a brief snippet from a SitePoint article that details the method I’m speaking of (overflow: auto, overflow:hidden) to clear a child element that is floated.
“…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. [clearing the floated element]
‘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).”
Simple can be better. I am sure many of us have used some variation of this technique, but it could take a lot of research for a noob to come across it.
tech | current events | rants
