CODEWITHSUNDEEP
htmlcsscss-position
Matthias Pospiech
Matthias Pospiech

Reputation: 3488

position image right of list

I want to show for each element of an ul list an image on the right side (a photo). This photo is a thumbnail link to the actual photo. The list itself contains 1 up to 4 lines of text. The total available width is something like 600 to 800 px.

This is what I tried, but the clear does not go below the image, thus the next list item does not start below the previous image:

<div style="float:right; width:80px;">
    <a class="thickbox" href="2013.jpg" ><img src="2013.jpg" /></a>
</div>
<ul>
    <li>Some long text spanning across several lines. Some long text spanning across several lines. Some long text spanning across several lines. </li>
</ul>

<div style="clear: right; float:right; width:80px;">
    <a class="thickbox" href="2014.jpg" ><img src="2014.jpg" /></a>
</div>
<ul>
    <li>Some long text spanning across several lines. Some long text spanning across several lines. Some long text spanning across several lines. </li>
</ul>

Upvotes: 0

Views: 56

Answers (1)

j08691
j08691

Reputation: 208002

Since you're treating the text and image as a group it makes sense to wrap them in an element like a div, and then clear that.

jsFiddle example

<div class="clear">
    <div style="float:right; width:80px;"> <a class="thickbox" href="2013.jpg"><img src="http://www.placekitten.com/80/200" /></a>

    </div>
    <ul>
        <li>Some long text spanning across several lines. Some long text spanning across several lines. Some long text spanning across several lines.</li>
    </ul>
</div>
<div class="clear">
    <div style="clear: right; float:right; width:80px;"> <a class="thickbox" href="2014.jpg"><img src="http://www.placekitten.com/80/200" /></a>

    </div>
    <ul>
        <li>Some long text spanning across several lines. Some long text spanning across several lines. Some long text spanning across several lines.</li>
    </ul>
</div>
.clear {
    clear:both;
}

Upvotes: 2

Related Questions