advanced code snippet search

Posted By

prsjohnny on 08/11/10


Tagged


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

jplr
Onfire60


Clear Fix

 / Published in: CSS
 

URL: http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/

  • _height: Triggers “haslayout” in Internet Explorer, by using the underscore trick to target IE6 directly.
    • content: After the container div, append a period.
    • visibility: We don’t want to see the period, so hide it from the page. (Equal to setting opacity: 0;)
    • display: Forces the period to display as a block-level, rather than inline.
    • clear: The important property. This clears the main and sidebar divs. This is the same as adding an unsemantic to our page.
    • height: Don’t take up any space.
    • font-size: Just a precaution for Firefox. This browser sometimes adds a bit of space after our parent element. Setting the font-size to zero fixes this.
Expand | Embed | Plain Text 
  1. .clear_fix {
  2. 	_height: 1%;
  3. }
  4.  
  5. .clear_fix:after {
  6. 	content: ".";
  7. 	visibility: hidden;
  8. 	display: block;
  9. 	clear: both;
  10. 	height: 0;
  11.     font-size: 0;
  12. }

Report this snippet  

You need to login to post a comment.