Floating Along
Filed in: General Add comments
Position is Everything has a very interesting article on an alternate method for clearing floats.
As the article explains, typically floated elements inside of a box will overlap the borders of the containing box if the containing boxes content isn’t enough to push down the bottom edge of the containg box. Internet Explorer is an exception, as it will resize the containing box to enclose the float. However, the peekaboo bug often crops up in these situations.
The method explained in the article uses the css 2 property :after to add an invisible character after the float to clear it, thus eleviating the need for an extra <div> in the markup. Brilliant!