Advanced Search

Make an HTML Container Clear Floating Child Elements Using Only CSS

/ Published in: CSS
Save to your folder(s)
Usually when designing a site using floating elements in HTML/CSS, you need to an extra html element with the css style {clear:both;}. This method lets you apply styles to the container of the floating elements so that you don't have the headache of using a clearing div. This is cross-browser and IE6 friendly!

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. #mySelfClearingDiv { /* put your regular css styles in here */ }
  2.  
  3. /*paste this stuff just below it to make it self-clearing */
  4. #mySelfClearingDiv:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
  5. #mySelfClearingDiv { display: inline-block; _height: 1%; }
  6. #mySelfClearingDiv { display: block; }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.