Question

I have a setup like this:

<div class="item">
  <img src="..."/>
  <span class="item-detail"></span>
  <span class="item-detail"></span>
  <!-- ... -->      
  <span class="item-detail"></span>
</div>
<div class="item"><!-- ... --></div>
<div class="item"><!-- ... --></div>
<!-- ... -->
<div class="item"><!-- ... --></div>

Each of the spans is positioned absolutely within their div (which has position:relative), laying within the img, so the div gets its size from the size of the img.

I want to display as many of the divs as will fit on a single line. I could just have the divs float:left, but I don’t like that because

• the divs’ containing element doesn’t get resized by them
• it only prints 1-2 divs to a line when physically printed

So a better idea seemed to be to use display:inline on the divs. The imgs still line up correctly, however, now, the absolute positioning for the contained spans is now messed up – they appear to be positioned relative to the bottom of their containing div, rather than the top (at least, that’s what’s happening on Firefox3.6).

What’s going on? How can I get around this?

Answer 1

Try using display:inline-block, this will give you both characteristics for your element.