Keeping an floated image inside the div with CSS

Question

I'm having this problem, same as ever, but never try to find the right solution

code:

 <div id="ListOfTextAndPhotos">
      <div style="border-bottom: solid 1px silver;">
          <img src="photo.jpg" style="float: left">
          Some text about the photo
      </div>
      <div style="border-bottom: solid 1px silver;">
          <img src="photo2.jpg" style="float: left">
          Some text about the photo2
      </div>
      <div style="border-bottom: solid 1px silver;">
          <img src="photo3.jpg" style="float: left">
          Some text about the photo3
      </div>
  </div>

Question: How do I to keep the photo inside the DIV? with the separator line under the photo

Answer 1

A quick and dirty way to do it would be to float the containing div as well.

Answer 2

Floating an element takes it out of the flow of the document, therefore it will not take up space in the general flow when rendering on the screen. There are other ways of handling this, but here's a hack:

 <div id="ListOfTextAndPhotos">
      <div style="border-bottom: solid 1px silver;">
          <img src="photo.jpg" style="float: left">
          <div style="clear:both;">Some text about the photo</div>
      </div>
      <div style="border-bottom: solid 1px silver;">
          <img src="photo2.jpg" style="float: left">
          <div style="clear:both;">Some text about the photo2</div>
      </div>
      <div style="border-bottom: solid 1px silver;">
          <img src="photo3.jpg" style="float: left">
          <div style="clear:both;">Some text about the photo3</div>
      </div>
  </div>

Answer 3

The more traditional way (other than clearing) is to set the overflow property of the containing div to hidden.

<div style="border-bottom: solid 1px silver; overflow: hidden;">
      <img src="photo3.jpg" style="float: left">
      <div>Some text about the photo3</div>
</div>

Sometimes, IE6 does not honor the setting and you have to resort to the cLFlaVA hack.

Answer 4

Adding <div style="clear:both;"></div> is a complete hack and kills your ability to change your mind at a later date. The correct solutions is to use pure css with overflow: hidden; or zoom: 1;.

However, there's a little more to it than just adding overflow: hidden as you'll also need to make sure that the containing block has a width attribution too.

I'd also like to point out that in the above question and approved answer, what was the point of floating the image in the first place if the text is immediately told to clear it?

http://www.quirksmode.org/css/clearing.html

Answer 5

wil keep de images inside de containing div with the border at the bottom

Answer 6

I had a similar problem here where my images were overflowing my div:

< div id="offer"> < div class="inner"> < img src="offer.png" alt="">

where i had to have my image float:right; so that the text would appear on the left side of it and fill the space. I couldn't figure out why the heck it would overflow like that, but tj111's "quick and dirty" method of making #offer{float: left/right/upmycornhole;} totally solved the problem, and didn't reposition the div since the containing div is inside a wrapper that holds it in place on the page.

Thanks tj you're a life saver!!!