CODEWITHSUNDEEP
htmlcss
Eduardo Molteni
Eduardo Molteni

Reputation: 39413

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

Upvotes: 18

Views: 49177

Answers (5)

davethegr8
davethegr8

Reputation: 11595

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.

Upvotes: 46

neopod
neopod

Reputation:

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

Upvotes: 0

Steve Perks
Steve Perks

Reputation: 5530

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

Upvotes: 2

cLFlaVA
cLFlaVA

Reputation: 1498

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>

Upvotes: 4

TJ L
TJ L

Reputation: 24462

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

Upvotes: 2

Related Questions