Posted By

michellebracken on 08/18/11


Versions (?)

Clearing and Containing Floats

 / Published in: CSS

There are two basic methods to clearing CSS floats. The first is to use the clear property Say in the html you have your content and sidebar div floated to the left and you want to ensure the footer div sits below both. You would use the clear property You could also use clear: left or clear: right depending on which way the content and sidebar are floated. If on the other hand your html was:

and both the logo and tagline are floated, your header div will collapse and show as having 0 height. You can either add an empty div () and then clear the empty div as above or you can use the overflow property on the header div to contain the floated elements

This will keep the header div from collapsing even if everything inside has been floated.

  1. 1 #content {float: left}
  2. 2 #sidebar {float: left}
  3. 3 #footer {clear: both}
  5. 1 </pre>
  6. 2 <div id="header">
  7. 3 <img id="logo" alt="" /></div>
  8. 4 <pre>
  10. 1 div#header {overflow: hidden}

Report this snippet  

You need to login to post a comment.