CODEWITHSUNDEEP
htmlcsscss-float
Sandman
Sandman

Reputation: 2379

List items overlay on floated image

I have scratched my head about this a couple of times now, and I can't figure it out.

This is the code:

<div class='imgpos_5'>
    <a href='http://jonaseklundh.se'>
        <img src='http://jonaseklundh.se/bilder/icons/archive.png' width=50 height=50>
    </a>
</div>
<ol>
    <li>List item that is quite long and will wrap when reacing the image
    <li>List item
    <li>List item
    <li>List item
</ol>

With the CSS:

.imgpos_5 {
    float: right;
}

(JSFiddle: https://jsfiddle.net/5q9zo4te/) But the list items overlay on the image, making the link not work correctly. You can only click the image link where there are no list items that span over it - yet the content of the list items are properly wrapped. How do I fix this?

(EDIT: The actual percentage/pixel width of the imgpos_5 div is unknown to the code, it can contain multiple images, all floated right. The code can not hard-code the width of either the imgpos_5 or the OL tag)

Upvotes: 1

Views: 211

Answers (2)

chandni
chandni

Reputation: 169

.imgpos_5 {
  float: right;

}
.listItem {
  float: left;
  margin: 0;
  padding: 0;
}
<div class='imgpos_5'>
  <a href='http://jonaseklundh.se'>
    <img src='http://jonaseklundh.se/bilder/icons/archive.png' width=50 height=50>
  </a>
</div>
<ol class="listItem">
  <li>List item that is quite long and will wrap when reacing the image</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

Give a clear: both on the <ul>:

ol {clear: both;}

Or, give width and float the <ul>:

.imgpos_5 {float: right; width: 40%;}
ol {float: left; width: 40%;}

Upvotes: 1

Related Questions