CODEWITHSUNDEEP
htmlcss
Chris Han
Chris Han

Reputation: 420

Preventing divs with images from wrapping oddly in LIs

How may I prevent this odd cascading effect when using LI content such as the following: http://jsfiddle.net/arPzt/1/

I can achieve the desired behavior by inserting BRs after each LI, but a) the vertical spacing between LIs seem to vary depending on the length of the content and b) there must be some better / more proper way of achieving this.

<ul>
<li>
  <div style="background-color: #990000; width:70px; float: left">
      <img style="width: 45px" src="http://www.google.com/doodle4google/images/doodles/2013/1-5.jpg" />
  </div>
  <div style="background-color: #00FF00; margin-left: 70px;" >
  body some interesting large amount of content. some interesting large amount of content.
  </div>
</li>
<li>
  <div style="background-color: #990000; width:70px; float: left">
      <img style="width: 45px" src="http://www.google.com/doodle4google/images/doodles/2013/1-5.jpg" />
  </div>
  <div style="background-color: #00FF00; margin-left: 70px;" >
  body some interesting large amount of content. some interesting large amount of content.
  </div>    
</li>
<li>
  <div style="background-color: #990000; width:70px; float: left">
      <img style="width: 45px" src="http://www.google.com/doodle4google/images/doodles/2013/1-5.jpg" />
  </div>
  <div style="background-color: #00FF00; margin-left: 70px;" >
  body some interesting large amount of content. some interesting large amount of content.
  </div>    
</li>    
</ul>

Upvotes: 0

Views: 46

Answers (3)

James Holderness
James Holderness

Reputation: 23001

I would suggest that as an alternative to the clear:left suggestions, you consider using overflow:hidden on the li elements instead.

While clear:left fixes this simple example, you could still have layout issues with any additional content following the list. Using overflow:hidden on the li elements will restrict any floating effects to just those items.

More information in this article.

Upvotes: 1

Guy Nakash
Guy Nakash

Reputation: 36

I believe what you need to do is simply clear the 'float' after each LI

Like this:

<li style="clear:both;">

Upvotes: 1

Christian
Christian

Reputation: 19740

You're floating the elements, but if you want them to clear the previous line, you need to use clear: left or clear: both if you ever use right floated elements.

li {
  clear: left;
}

jsFiddle: http://jsfiddle.net/arPzt/3/

Upvotes: 2

Related Questions