2

I have an left floated div in another div and the floated divs content is getting out of the parent.

See live:

http://jsfiddle.net/eWkUg/

* {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul {
  width: 600px;
}
ul li {
  border: solid 1px #000;
  margin: 15px 0;
}
.img-section {
  float: left;
  border: solid 1px red;
}
<ul>
  <li>
    <div class="img-section">
      <img src="http://www.placehold.it/50X100">
    </div>
     Hello world
  </li>
  <li>
    How to avoid the red box getting out of the black one? (and hiding another list element)
  </li>
</ul>

I've been trying clear: left/right/both, but nothing helps.

How to avoid this? I HAVE to float the whole div (not the contents) due to image overlay (not included in example above)

1
  • do you want to limit the inner div's height or is the main div supposed to extend accordingly to the inner contents?
    – yoda
    Jan 29, 2011 at 16:03

5 Answers 5

8

You can fix it by adding overflow:auto to ul li, if I understand your problem correctly.

1
  • I like this slightly better than Sotiris' answer because it uses 'auto' instead of 'hidden'. Using 'hidden' can leave you unaware of other issues you might have dealing with margin, padding, width, etc.. The 'hidden' value also has its place for float containment like this, but I'd start with 'auto'.
    – reisio
    Jan 29, 2011 at 17:03
3

I am not sure if this is what you need, but you can add overflow:hidden for ul li this will show the image's div wrapped by the li.

Demo: http://jsfiddle.net/eWkUg/9/

7
  • That's interesting. Why does overflow: hidden effect this?
    – Tomalak
    Jan 29, 2011 at 16:23
  • @Tomalak this article shed light on the topic css-tricks.com/all-about-floats and some answers in SO also :)
    – Sotiris
    Jan 29, 2011 at 16:27
  • @Tomalak: if you think about it, the browser has to calculate the height of the element to be able to deal with any (potential) overflow.
    – reisio
    Jan 29, 2011 at 17:01
  • @reisio: Couldn't that have potentially negative side-effects, like, actually hiding content inadvertently?
    – Tomalak
    Jan 29, 2011 at 17:58
  • @Tomalak yes. But overflow:auto or overflow:scroll have the same effect so you just choose what fits better.
    – Sotiris
    Jan 29, 2011 at 19:47
3

Floated elements do not expand their parent's height. This causes the effect you see.

You must add a block-level element with clear: left; after the last floated element:

<li>
    <div class="img-section"><img /></div>
    <div class="text-section">...</div>
    <br style="clear: left;" />
</li>

Usually a <br> is used for that purpose.

1
  • 3
    <br style="clear: left;" /> is old fashion method and non-semantic
    – Sotiris
    Jan 29, 2011 at 16:14
0

Change the layout to:

<ul>
    <li>
       <div class="img-section">...</div>
       <div class="text-section">...</div>
       <br style="clear:left" /> <<---- add this 
    </li>
    etc...

Once you float an element, it's somewhat removed from the document flow, and you have to force the parent container to extend past the floated element's lower limit. You do that by adding that extra
line.

0
0

Add clear:both to ul li:

ul li {
    border: solid 1px #000;
    margin: 15px 0;
    clear:both;
}

http://jsfiddle.net/hAFWA/

1
  • 1
    Doesn't address the issue, or all of the issue.
    – reisio
    Jan 29, 2011 at 17:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.