Displaying inline lists with two lines of content

June 27, 2009 6:51 PM

CSS Emergency: This seems so simple, but yet everything I've tried is failing. How in the world can I make an unordered list containing a thumbnail and caption display inline?!

It's as simple as this:

1. I have an unordered list
2. Each list item contains a small thumbnail and a two word caption
3. I'd like it to display the caption below the thumbnail

I need the list items to display inline, but when I tell it to do that, the caption displays to the right of the picture. If I add a br between the two, it screws up the entire list. If I throw in a div around the caption, it does the same thing... as does span and any other inline element. Floats won't work, b/c I need these to center themselves inside a parent element.

Please tell me I'm overlooking something incredibly obvious. Here's an image example if I'm not making myself clear. Thanks!

posted by bjork24 to Computers & Internet (19 answers total)

This is incredibly hacky, but I believe that this will work:

- Put the thumbnail and the caption in a div of its own.
- The thumbnail is displayed as a block element (display:block)
- The div is displayed inline (display:inline)

Didn't really get the part about centering the thumbnails inside a parent element, but I assume that the whole row of thumbnails are to be placed in the center.

If that's the case, wrap all the divs (from each individual thumbnail) into a larger container div that has the properties margin:0 auto

HTH
posted by titantoppler at 7:11 PM on June 27, 2009

Do you have to have it in a list? Because if you stick each image and caption (in a p) into a div, you can just float:left each div.

div.list {float:left;}

<div class="list">
   <img src="" />
   <p>Caption</p>
</div>
posted by SuperSquirrel at 7:15 PM on June 27, 2009

Oops, sorry I missed the part about not using floats. Never mind.
posted by SuperSquirrel at 7:16 PM on June 27, 2009

Given code like this:

  <ul>
    <li><img src="picture.png"><p>Caption text</p></li>
    <li><img src="picture.png"><p>Caption text</p></li>
    <li><img src="picture.png"><p>Caption text</p></li>
  </ul>

Then the following gives you what you've asked for in your example:

  li {
    float: left;
    list-style: none;
  }

If that's not what you're looking for, some actual example code might make this less of a hypothetical question.
posted by larsks at 7:16 PM on June 27, 2009

Yep, I'm also a bit confused about the "can't use floats because they need to be centered" part. I know this uses floats, but why can't you do something like this tutorial for a simple image gallery? To center the entire gallery, you'd wrap the whole thing into a <div id="wrapper"> with the property #wrapper { margin: 0 auto; } (as titantoppler said).
posted by theiconoclast31 at 7:21 PM on June 27, 2009

Response by poster: Like so.

If I float the *li* then they wind up on the left of the #thumbContainer. I want them to be centered, which works if I use display:inline
posted by bjork24 at 7:24 PM on June 27, 2009

Response by poster: That float tutorial better illustrates my point: see here

See how the images and captions are aligned to the left of the containing box? I need those images centered within a containing box that has a set width.
posted by bjork24 at 7:27 PM on June 27, 2009

A link to the page in question would be a big, big help.

Floats won't work, b/c I need these to center themselves inside a parent element.

Then create a new float context by putting a <div> around the <ul>. Floats are the answer.
posted by ixohoxi at 7:31 PM on June 27, 2009

Best answer: Without mocking it up myself... what happens if you wrap the contents of the list items in a span, and then set that to {display: inline-block}, and then set the images to {display: block}?
posted by Plug Dub In at 7:33 PM on June 27, 2009

So put the containing box into yet another div, and center that one.
posted by SuperSquirrel at 7:33 PM on June 27, 2009

You could hack this into a list all night, but that sure looks like a table.
posted by sageleaf at 7:33 PM on June 27, 2009

Response by poster: I'd gladly supply a link if I could, but it's hidden inside a corporate, password-protected development sandbox.

I think I'm going to have to artificially pad the left side of the containing element until the floated elements look centered. I've been stuck on this for too long and need to get past.

I'm still totally open to other solutions, however, so if you have one, please let me know.
posted by bjork24 at 7:35 PM on June 27, 2009

Response by poster: FYI: inline-block was the answer. That did it without any further hacking. I'd forgotten all about that value. Thanks for the help guys!
posted by bjork24 at 7:40 PM on June 27, 2009

I'm about to upload a solution and paste a link. Sit tight.
posted by ixohoxi at 7:40 PM on June 27, 2009

Response by poster: Feel free, ixohoxi. I'd love to see it.
posted by bjork24 at 7:40 PM on June 27, 2009

Best answer: ...okay, is this what you're trying to do?

(I've only tested it in Firefox so far, but it should be pretty cross-browser)
posted by ixohoxi at 7:41 PM on June 27, 2009

Yay. Careful with that inline-block though, because IE ignores it if you apply it to block-level elements. That's why you need those spans instead of applying it directly to to LI.
posted by Plug Dub In at 7:41 PM on June 27, 2009

Yeah, inline-block isn't widely supported enough for general use.
posted by ixohoxi at 7:43 PM on June 27, 2009

Response by poster: ixohoxi: that works too, although not as nicely as inline-block (since it allows the containing box to grow, while the LI elements expand or contract). Either way, both of these solutions are workable. Thanks!
posted by bjork24 at 7:47 PM on June 27, 2009