Tuesday, December 1, 2009

Inline Block, A Quick Work-Around

I've had previous struggles with inline-block quirks, and have been recently using a handy css solution I thought I'd share. Whenever I want a certain div, for example, to be displayed as inline-block, I simply add the class "inlineBlock" to it. Well, you ask, how do I define this class? I am glad you asked. I define it like so:

<style type="text/css">
.inlineBlock {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
.myClass1 {
/* other stuff */
}
<style>

<div class="myClass1 inlineBlock">
A fancy inline-block div.
</div>

This CSS causes my div to be displayed correctly as an inline-block in every browser I've checked. Not sure how the magic works specifically, but it does the job! If you have improvements or observations, add a comment below.