Use overflow:hidden instead of a clear class

2010-01-16 @ 14:29

Don’t do this

Do you add a class called ”clear” after floated elements to get the background to go all the way down?

<style type="text/css">
     .clear {
          float: none;
          clear: both;
     }
</style>

<div class="container">
     <div class="one"></div>
     <div class="two"></div>
     <div class="clear"></div>
</div>

I have used that for many years now and it works well. However this is a class we shouldn’t need to add.

Do this instead

Instead of the clear class I found a much better way. For some reason the overflow:hidden lets the background go all the way down.

<style type="text/css">
     .container {
          overflow: hidden;
     }
</style>

<div class="container">
     <div class="one">
     <div class="two">
</div>

See that? No clear class needed.

Share
RSS-feed for comments

One reply to “Use overflow:hidden instead of a clear class”

Leave a reply