Avoiding non-semantic divs when using CSS float

XHTML/CSS

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!

2 Comments

  1. Ailis  •  Dec 10, 2005 @12:07 pm

    Mah!!! Mark you have too many posts about things I don’t get!!!!

  2. Mark  •  Dec 10, 2005 @2:00 pm

    Hehe, sorry. Will try to keep the geek posts to a minimum, I was just very pleased to find this one out!