CSS: Show an image and a div next to each other in list item
css, html
Solution
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).
Problem
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.