Here’s a nice little CSS trick, too help you keep your HTML cleaner.

Whenever you happen to be messing around with floated elements you will have noticed that the wrapper containing the floated elements collapses.

CSS demo

This of course is no longer annoying because you can just plonk a div with a CSS rule of clear:both after the floated elements.

CSS demo

However, the purist amongst you will be experiencing a slight itchy feeling because, why would you use an empty div in you HTML to fix a styling issue. Everyone knows that HTML is for content and CSS is for styling.

Well stop scratching. Here is the solution:

Add overflow:auto or overflow:hidden to the container.

CSS demo

And that is it. Have a look at the demo.

Now the Drawbacks

  • Big surprise this doesn’t work in Internet Explorer 6 .
  • Using overflow:auto will cause a scrollbar if your content is extending the boundary of the container.
  • To avoid a scrollbar from showing you should use overflow:hidden. Again, there is a drawback to this method as well. Using overflow:hidden will hide any content that exceeds the boundary of the container.

This post was brought to you by Elevate Local, helping to keep your code a cleaner place.