Question

When I set out this morning the task seemed simple: build a list of elements; each element consists of a thumbnail, a title, and a sub-title.

I’d like to have the image left aligned with the title and sub-title next to it. If you take a look at a YouTube video page: the Related Videos box has a similar layout.

UPDATE: To be more specific: I’m trying to produce a two column layout: image on the left, text on the right. Some of the suggested solutions result in the text being wrapped around the image.

Here the HTML structure:

<ul>
  <li><img src="one.jpg"><div class="content">Title<br>sub-title</div></li>
  <li><img src="two.jpg"><div class="content">Another Title<br>sub-title</div></li>
</ul>

With no CSS, the text is displayed below the image. I tried many things, float:left on the image and/or the div. Nothing helped.

The closest I got was setting float:left for the img tag. But then the second list item was drawn halfway into the first one.

Am I taking the wrong approach? Do I need to structure the HTML differently?

Thanks!
Mark.

Answer 1

Put the img inside the div, then you can float it. Then clear the float, e.g. by using a br:

 <li><div class="content"><img src="one.jpg">Title<br>sub-title</div><br style="clear:both"></li>

CSS:

 .content img {float:left}

Better yet, get rid of the div altogether (you can style the li directly) and use h2 and h3 for the headings (so as to keep the markup semantic).