Float clearing with overflow

Without a doubt, the biggest impact my CSS world is the float clearing powers of overflow. After struggling so many times with solutions to avoid mark-up based clearing (i.e. a span with a clear class), and admittedly finding some success with the Clearfix solution. I found this article by Sitepoint. Devastatingly simple, easy to implement, and I have followed this, in most cases, ever since.

The solution however isn’t without it’s own problems – scrollbars often appear on the wrapping DIVs. Particularly if you’re tightly wrapping a selection of links. I.e. a menu bar. A fix came about when a work compadré, Sam Loomes, recently made a brilliantly simple observation, that maybe the fix would work by setting overflow to hidden. God damn, it worked, scrollbars are banished and the clearing still occurs!

So here it is, CSS overflow fix in all it’s, um, glory. With no semantic or layout implications. Enjoy.

.wrapper {
    overflow: hidden;
}