Avoiding non-semantic divs when using CSS float

Apologies for the boring XHTML post (you love them really) but I just found the best thing ever. For a while now I’ve had to use <div class="clear">&nbsp;</div> (with CSS set to clear: both;) in a few of my layouts (some floated layouts require a cleared element below both of them so that their parent element encloses them all the way to the bottom — you’ll be familiar with it if you use floats).

Well no more! I’ve found a much better solution. I found it in the guestblock code (guestblock having been recently installed on Open Space: open-space.org.uk/guestblock). And it’s so simple I cant believe I didn’t think of it myself! Well done, Matthew!

And here it is, in all its simplicity:

  1. XHTML: <hr class="clear" />
  2. CSS: .clear { clear: both; visibility: hidden; }

Genius!

  • Tagged with:
  • Posted in: Uncategorized

2 Comments »

Share this post

2 Comments