I’ve learned a lot of fun little tidbits in my time here at dt. One of my favorite insights has to do with clearing floated elements. There are several ways of dealing with this issue. I used to add an empty div with “clear: both” just under the floating element.

The Better Way to Fix it

But, there’s a simpler and more efficient way to address this issue. By placing a little bit of CSS on the containing element, the height of the floating elements are magically detected.

width: 100%; (any width definition besides “auto” will work)
position: relative;
overflow: hidden;

Create a class of “container” and add that class to whatever needs to be cleared. Unfortunately the “overflow:hidden;” means you won’t be able to use positioning or margins to push elements outside of their container, so just be sure to plan ahead.

Why Does This Matter?

Code is all about being efficient. This solution is quicker for coding since it’s just an additional class and there aren’t anymore empty divs taking up space in the html. That means there’s less code to load, less to sort through when doing edits and updates, and it’s very modular.

Reblog this post [with Zemanta]