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.

Leave a Reply

Click here to cancel reply.

Name (required)

Mail (will not be published) (required)

Website

Notify me of followup comments via e-mail