Posted by & filed under Web Development.

I’m not sure whether this is a well-kept secret or widely recognized knowledge, but we’ve come to rely heavily upon using the “inline-block” CSS display property.

I’m not sure whether this is a well-kept secret or widely recognized knowledge, but we’ve come to rely heavily upon using the “inline-block” CSS display property. Inline-block is sort of a hybrid between block elements which take up the entire width allocated to them, and inline elements which don’t, except you can assign a height and width to an inline-block, which is incredibly useful.

The caveat is that inline-block doesn’t work in IE (neither to the CSS display table properties). However, you can work around this simply by setting the following attributes:

#mydiv {
     display:inline-block;
     *display:inline;
     zoom:1;
}

The first line is for W3C compliant/non IE browsers, and the second and third are for IE and are ignored by other browsers. “Zoom” is some weird IE only property which is explained here. This trick does work reliably and consistently in all IE browsers we have tested this with, including IE 6!