Keeping an floated image inside the div with CSS

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

From stackoverflow

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

  Eduardo Molteni : Kind of work, but with side effects

• 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>
  

  Eduardo Molteni : Don't mind the hack. Works for me. Thanks!

  davethegr8 : the problem is, if you want to float more items inside the document this can cause problems because of the clear setting

  cLFlaVA : No problem. You could also place an empty div in there after your text, if you didn't want the text appearing on its own line. I usually do something like this:

  with a CSS styling of .clr { clear: both; }

  Darko Z : *sigh* yes this works but the real answer is using the overflow property as per davethegr8's answer

  davethegr8 : @cLFlaVA - Lets say you have this code in an element along with some other text. And you also have a sidebar that is positioned with a float. If you use the clear, you just broke your sidebar because it will affect the flow of these photos.

  cLFlaVA : @davethegr8 - I wasn't disagreeing with you; I posted my initial comment at about the same time you did. I never claimed this was the be-all and end-all solution, in fact I even offered a forewarning that it was a hack. Perhaps I shouldn't have posted at all.

  annakata : no, it's always worth posting, but it should be acknowledged that div.clear is an anti-pattern

  Eduardo Molteni : Sorry cLFlaVA, no more accepted answer for you, but you can keep the upvote for the quick response :) thanks!

• 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.

  Darko Z : +1 for correct answer and no clear hack

  cLFlaVA : @davethegr8: Did you leave the clear: both in there accidentally, or is it still needed?

  davethegr8 : @cLF - oops... I copied that from the about and forgot to remove it. Edited.

  Eduardo Molteni : OK, I changed the Accepted answer

• 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

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

• 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!!!