Dec
06
2005

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!

Written by Mark in: XHTML/CSS |

2 Comments »

  • Ailis

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

    Comment | Saturday, December 10 2005
  • Hehe, sorry. Will try to keep the geek posts to a minimum, I was just very pleased to find this one out!

    Comment | Saturday, December 10 2005

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress | Aeros Theme | TheBuckmaker.com WordPress Themes