say no to float: use inline-block

Sometime we let inline elements float only for being able to set the width/height of the element. But by setting inline-block to elements, we can achieve same goal in ie6/ie7/ff3/safari (except ff2, use display: -moz-inline-stack instead). Ie6/Ie7 accepts display:inline-block only for inline elements. For block level elements, zoom:1 and display: inline can mimick the disply:inline-block. ex:

#inline-element{display:inline-block, width:10em}
#block-element{width:10em; zoom:1; display:inline}
#all-elements-in-all-browsers {display:inline-block; width:10em; zoom:1; *display:inline}

Cross Browser Support for inline-block Styling

http://chunghe.googlecode.com/svn/trunk/experiment/inline-block/inline-block-to-replace-float-inline-elements.htm

IE supports inline-block, but only for elements that are natively inline. So, if you really want to use inline-block, you’re restricted to spans and strongs and ems, when a list or paragraph would perhaps make more semantic sense (and also degrade more nicely for non-CSS users.)

However, if you trigger hasLayout on a block element, and then set it to display:inline, it magically becomes an inline-block in IE! By using the *property hack (which I love so well), you can hide the display:inline from all non-IE browsers effortlessly.