Geek Answers Handbook

CSS: show the image and div next to each other in a list item.

When I set off this morning, the task seemed simple: build a list of elements; each element consists of a thumbnail, a caption, and a caption.

I want the image to be aligned with the caption and subtitle next to it. If you look at the YouTube video page: the field of similar videos has a similar layout.

UPDATE: To be more specific: I'm trying to create a layout from two columns: the image on the left, the text on the right. Some of the proposed solutions result in text wrapping around the image.

Here's 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>

Without CSS, text is displayed below the image. I tried a lot of things, float: left on the image and / or div. Nothing helped.

float: img. .

? HTML -?

! .

+5
4

img div, . , . br:

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

CSS

 .content img {float:left}

div ( li) h2 h3 ( ).

+4

<li>

background url(image path) no-repeat;

, ,

+2

<span> <div>. Span inline, div - . ( , , div inline, , .)

+1

, YouTube, DIV, UL > LI. :

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

, , HTML. .

+1

More articles:


All Articles