We’ve been working a lot on the new design at Curse lately, and one thing we’ve used heavily are CSS sprites. The only issue we had with these is they have to be a block element (or an inline-block element) in order to display them properly.

My first solution was to simply float them and wrap them in a fixed height container. This worked, but you can’t use text-align when they are floated. About a week later while I was looking at some cool CSS trick I found a better solution: inline-block wrappers.

“inline-block“ is a value usable on display, which makes your element act like a block element, but without clearing content around it. The problem arises though, that inline-block does not work in older browsers.

The solution: wrap your block element in a container using inline-block styles. Below is the example and solution.

1
2
3
4
5

.inline {
    display: -moz-inline-block;
    display: -moz-inline-box;
    display: inline-block;
}

1

<span class="inline"><div>My inline block element</div></span>

For those interested, here are a couple of links of this in use:

• Image Gallery Display
  


• Download Now/Add to Favorites Buttons