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.

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

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