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

The following hack can be used to fix that.

Demo

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.