The CSS Overflow Trick

For those who work with front-end code, clearing floated elements has probably been one of the most common layout problems when using CSS. The problem is brought on when an unfloated container has a floated element or elements. The parent looks like in takes up no space at all while the floated elements seem to fall out of the parent. Frustrating stuff.

Traditional fixes consisted of either A) setting an element with clear: both; after the floated element or B) basically floating everything. Option A is not semantic and option B is very inefficient. I've used both options since I've learned CSS so I was surprised when I read Sitepoint's article about how to clear floats easily. Continue reading…