IE block level element inline-block hack

IE doesn't apply the value inline-block for the CSS display property on HTML elements that default to block level.

Demo

DIV
DIV
DIV
DIV
DIV
DIV

The following hack can be used to fix that.

Demo

DIV
DIV
DIV
DIV
DIV
DIV

CSS

#wrap{text-align:center}
#wrap div{width:300px;border:2px solid red;display:inline-block}
#wrap div{display:inline}
#wrap>div{display:inline-block}

HTML

<div id="wrap">
   <div>DIV</div>
   <div>DIV</div>
   <div>DIV</div>
   <div>DIV</div>
   <div>DIV</div>
   <div>DIV</div>
<div>

Applies to: IE 5.5 & 6

Note: The inline-block value was added in CSS2.1. Most modern and relevant browsers support the inline-block value, including: Opera 7+, IE5.5+, recent iCabs and recent KHTML based browsers such as Safari and Konqueror. Currently Gecko based browsers (Mozilla, Firefox etc.) do not support inline-block. Instead Gecko supports 2 experimental/proprietary -moz-inline-block and -moz-inline-box values that are to buggy to be usable for most purposes. For some purposes a Gecko CSS table bug can be exploited to achieve inline-block type behaviour, see Centered Image Gallery with captions.