Question

Is there a better way to have the same output generated by the following code?

The HTML code is:

<div class="imaged backgrounded"></div>
<div class="title">
  Title test text
</div>

The CSS code is:

.imaged {
    background: transparent url("/images/sprites.png") no-repeat;
    float: left;
    height: 24px;
    margin: 0 8px 0 0;
    width: 24px;
}

.backgrounded {
    background-position: -16px -106px;
}

.title {
    display: inline-block;
    margin-top: 2px;
}

Answer 1

What you have looks fine.

Here are some trivial improvements:

• The default background-color is transparent, so you don’t need to specify it.
• You don’t need quotes around that image url.
• I would put the width and height properties next to each other, because they are related.
• display: inline-block doesn’t work on elements that aren’t naturally inline in IE7, a browser that still unfortunately has some market share. If your site has any IE7 users, you should fix it.

So, this is the final result:

.imaged {
    background: url(/images/sprites.png) no-repeat;
    float: left;
    width: 24px;
    height: 24px;
    margin: 0 8px 0 0;
}
.backgrounded {
    background-position: -16px -106px;
}
.title {
    margin-top: 2px;
    display: inline-block;
    *display: inline;
    zoom: 1;
}

You should also consider changing <div class="title"> to something more semantic, such as h2 or h3 depending on how important the titles are.

Yes, this is all very pedantic.