How to clear 50% floats

Let’s say I have a bunch of floated elements which are all 50% width but are of varying heights.

I can use the CSS3 pseudo-selector to select every other element, clearing the float, displaying what appears to be rows of 2 elements.

To combat the white space I could change the background-color of #container to be a similar colour to the floated content.

See the Pen Clear 50% floats by James Alexander Lee (@jamesl1001) on CodePen

Posted Monday, September 2nd, 2013 under Scrapbook.

Leave a Reply