Text wrap and overflow

HTML & CSS
1

Hi Guys,

im doing a simple profile page with an image and text wrapping around the image, here is my css

.profile {
   margin-bottom: 10px;
   border-bottom: #ccc 1px solid;
   clear: both;
   overflow:hidden;
}

.profile img {
   float: left;
   border: #ccc 1px solid;
   padding: 3px;
   margin-right: 5px;
}

this worked fine without the overflow:auto;

but i had one profile that only had an image and no text, so the div did not expand to clear the image. So i added the over flow, which cleared the image

BUT the problem i have now is that all profile images have moved up by about 10px which makes the image and text unaligned

this is what it looks like http://i30.tinypic.com/50ilqo.jpg

my html is

<div class="profile"><img src="images/test.jpg"><p>testing testing testing</p></div>
2

thanks guys i sorted it now

3

It’s collapsing margins again and once overflow is added the top margin on the p element doesn’t collapse into .profile anymore.

Without overflow the top margin on the p element effectively becomes the margin on .profile which gets moved down as a whole including the floating image contained within.

When overflow is added then the p margin doesn’t collapse and only the text is moved down.

4

I’m not sure why your image moved when overflow was added, but I can’t tell if you are overriding browser defaults with your p’s margins either.

If you want the space, specifically mention it. If you want both image and text to move down, give .profile a top-padding of about 10px. If you only want the image down, you could give the image top-margin of about 10px.

Make sure p is either no margins, or whatever margins you want. You might want to give p a background colour for testing, and take a look in all browsers to see what it’s doing.