[ACCEPTED]-Keeping an floated image inside the div with CSS-css
The more traditional way (other than clearing) is 4 to set the overflow property of the containing 3 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 2 the setting and you have to resort to the 1 cLFlaVA hack.
Floating an element takes it out of the 4 flow of the document, therefore it will 3 not take up space in the general flow when 2 rendering on the screen. There are other 1 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>
A quick and dirty way to do it would be 1 to float the containing div as well.
Adding <div style="clear:both;"></div> is a complete hack and kills your 11 ability to change your mind at a later date. The 10 correct solutions is to use pure css with 9 overflow: hidden; or zoom: 1;.
However, there's a little more to it 8 than just adding overflow: hidden as you'll 7 also need to make sure that the containing 6 block has a width attribution too.
I'd also 5 like to point out that in the above question 4 and approved answer, what was the point 3 of floating the image in the first place 2 if the text is immediately told to clear 1 it?
I had a similar problem here where my images 12 were overflowing my div:
< div id="offer"> < div 11 class="inner"> < img src="offer.png" alt="">
where 10 i had to have my image float:right; so that 9 the text would appear on the left side of 8 it and fill the space. I couldn't figure 7 out why the heck it would overflow like 6 that, but tj111's "quick and dirty" method 5 of making #offer{float: left/right/upmycornhole;} totally 4 solved the problem, and didn't reposition 3 the div since the containing div is inside 2 a wrapper that holds it in place on the 1 page.
Thanks tj you're a life saver!!!
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.