Quick Tips : Clearing Breaks
Wednesday, October 14th, 2009
Yes they’re a dirty little web trick but clearing breaks can come in quite handy in these troublesome cross browser issue ridden days.
To learn more about floats and how they work have a read of this vanseodesign.com article.
So how to use them, well personally I declare 3 styles in my CSS
/*clear breaks*/
br.clearright{ clear:right; line-height:0;}
br.clearleft{ clear:left; line-height:0;}
br.clearboth{ clear:both; line-height:0;}
They obviously correspond to clearing left, right or both. Then when I have a section of code where I need to clear something I call one in.
</div> <!--clear needed here//--> <br />
Also take note of the line-height:0, this helps when IE likes to stick in padding and margins and borders and all sorts of other stuff you didn’t ask for!
Nice and simple!
Want to read more articles like this? Subscribe to our RSS feed.
Tags: clearing, CSS, div, floats, HTML, quick tip
Filed under Quick Tips.You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
Follow me on twitter - @dsparks83
You’ve got your position over better than I at any time could, many thanks!