htmlcsscss-sprites

Display a sprited background image DIV next to an H3

I have the following HTML:

<div style="display: inline-block; width: auto;">
    <h3>
        Search Criteria
    </h3>
    <div style="background-image: url(jQuery-UI/images/ui-icons_2e83ff_256x240.png);
        background-repeat: no-repeat; background-position: -16px -144px; width: 16px;
        height: 16px;">
    </div>
</div>

I'm trying to get the div to display to the right of the h3. However, what's happening is the div is displaying directly under the h3.

What am I missing?

Solution

  • you need to float your H3 and div

    have a look at this jsFiddle. I added a background colour to the div as I don't have the image

    http://jsfiddle.net/CPvXA/