CSS: Show an image and a div next to each other in list item

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

Try <span> in place of <div>. Span is inline and and div is boxed. (There are other things you can do to make div inline, but I expect they would break the rest of your page.)

Answer 2

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).

Answer 3

The YouTube related views uses DIVs, not UL>LI combinations. Here's a scrap of their markup:

<div class="video-entry ">
        <a class="video-thumb-90" href="/watch?v=z-ze42I6NEo&amp;feature=related">
<img alt="Hereford Utd v Newcastle Utd 5 Feb 1972 (Hereford Utd Goals)" qlicon="z-ze42I6NEo" class="vimg90" src="http://i3.ytimg.com/vi/z-ze42I6NEo/default.jpg" title="Hereford Utd v Newcastle Utd 5 Feb 1972 (Hereford Utd Goals)"><button onmousedown="yt.analytics.urchinTracker('/Events/VideoWatch/QuickList+AddTo')" onmouseout="yt.www.watch.quicklist.mouseOutQuickAdd(this)" onmouseover="yt.www.watch.quicklist.mouseOverQuickAdd(this)" onclick="return yt.www.watch.quicklist.onQuickAddClick(this, this.getAttribute('ql'), 'http://i3.ytimg.com/vi/z-ze42I6NEo/default.jpg', 'Hereford Utd v Newcastle Utd 5 Feb 1972 (Hereford Utd Goals)')" class="master-sprite QLIconImg addtoQL90" title="Add Video to QuickList" ql="z-ze42I6NEo"></button><span style="display: none;" class="quicklist-inlist">Added to <br> Quicklist</span><span class="video-time"><span>0:45</span></span></a>
        <div class="video-main-content">
            <div class="video-mini-title"><a rel="nofollow" title="Hereford Utd v Newcastle Utd 5 Feb 1972 (Hereford Utd Goals)" href="/watch?v=z-ze42I6NEo&amp;feature=related">Hereford Utd v Newcastle Utd 5 Feb 1972 (Herefo...</a></div>
            <div class="video-view-count">73,309 views</div>
            <div class="video-username"><a href="/user/Boney1960">Boney1960</a></div>

        </div>
        <div class="video-clear-list-left"></div>
    </div>

If you want to copy an effect you see, just examine the document's HTML. It's pretty simple to do.

Answer 4

Works for me when I set the first li to float: left;

You might have some other style interfering with what you want to accomplish.

An unrelated tip is also to always use a reset.css to start off with, helps a ton with getting the results you want (and not having to spend so much time on cross browser tweaking).

Answer 5

you could give each <li> a class and apply

background url(image path) no-repeat;

then give a padding left equal to the width of the image to move text over and reveal the image