Clearing the new and not the old fashion way

[TheFilmGod]

<div class="clear"></div>

 

I heard there is a better, more css-ish way to this without using that extra div.

 

It should be something like ".clear:after", but I'm not sure....

 

Thanks!

[haku]

Here's an article that should help:

 

http://www.positioniseverything.net/easyclearing.html

[bronzemonkey]

The article on position is everything is a little old. It works better than a clearing div but you still need to add a class of "clearfix" to html elements you want to self-clear. Instead you can do it all in the stylesheet (and forget IE5/Mac):

 

/*Clearing for Modern Browsers */
#myelement:after,
#anotherelem:after {
  clear:both;
  content:".";
  display:block;
  height:0;
  font-size:0;
  line-height:0;
  visibility:hidden;
}

/*Clearing for IE6 only*/
* html #myelement,
* html #anotherelem {
  height:1%;
}

/*Clearing for IE7 only*/
*+html #myelement,
*+html #anotherelem {
  min-height:1px;
}

 

I like to put the IE declarations into IE stylesheet to avoid the selector "hacks". The {min-height:1px} for IE7 doesn't actually have any negative effect on other browsers, so you could put it in your normal stylesheet...just depends on whether you prefer to have the clearing css all in the same place and obvious what it is doing!