The Blog

Remember this?

* html SELECTOR { height: 1% } 

This is one of the ways you can force IE6 to clear the floats in a container. And it partially works in IE7 too. The reason height:1% works is that IE7 internal engine is same as IE6, just with a lot less bugs in it. Why is float clearing a problem then? Because this part of the selector: * html does not work anymore — that bug is fixed.

However, IE7 still incorrectly interprets height:1% rule and will automatically expand the height of the box in question if its floated content can’t fit. Thus, that trick is still a viable solution to float clearing, especially since IE7 does not support :after selector yet, thus the solution working in all other modern browsers is not usable:

SELECTOR:after {


	content: "."; 


	height: 0; 


	display: block; 


	visibility: hidden;


	overflow: hidden;


	clear: both; 


} 

The way forward

The * html will not match anything in IE7 and will have no effect at all. This also is an ugly hack: we use one IE bug applied through another IE bug. Ugly. Such hacks should be used only as last resort, when no other solutions are available. And IE has perfect solution available, called conditional comments.

Thus, using conditional comments the height:1% is still a fine solution for float clearing. However, there is a better one. IE7 now supports min-height rule (among others) and that rule also triggers the infamous hasLayout property in IE7 internal engine and thus it is usable for float clear.

SELECTOR { min-height: 0; } 

This is simple to use (just put it at the start of your CSS file) and enumerate the elements which content should be cleared — the same list you use for IE6. And all is fine, because this can sit in your main .css file and no modern browser would choke on it.

IE7 has good enough support for the CSS2.1 that you should very rarely need to write IE7-only hacks, thus have little use for separate file containing IE7 tweaks. Actually, the float clear is the only thing I needed to change in all the sites I created in the last few years to make them working in IE7.
What a welcome change.