CODEWITHSUNDEEP
htmlcss
Mike
Mike

Reputation: 1361

putting an image inside li tag is not expanding the li tag

I have an img tag inside a li tag, however, the li tag is not increasing it's height automatically to the height of the image

Example: http://jsbin.com/iroyev/

I want the img to come inside the li tag. Meaning the background color will be #F0F0F0 in this case.

How can I achieve this?

Upvotes: 0

Views: 3353

Answers (2)

Guffa
Guffa

Reputation: 700232

Floating elements doesn't affect the size of their parent.

You can get around this by applying overflow to the li element:

ul#something li#someunit {
  background: none repeat scroll 0 0 #F0F0F0;
  border-radius: 10px 10px 10px 10px;
  clear: both;
  display: block;
  position: relative;
  overflow: hidden;
}

Demo: http://jsbin.com/ubiquy/edit#preview

Upvotes: 3

brenjt
brenjt

Reputation: 16297

That is because you are floating the image. Try adding a div just before the closing li tag the image with a clear property.

<div style="clear:both;"></div>
</li>

Upvotes: 2

Related Questions