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

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.