Clearing a float

On some computers this looks fine, but on my home pc it looks like this - see the text flooding under the image

Attempted Fix
I think the problem was that I was floating the image to the left rather than floating the text to the right.

Unfortunately this fix looks worse than the first offering - a huge gap between first and second paragraph

Here’s the markup:
Float-fix is called ‘clearfix
class ‘thanks’ is the background css class…



<body id="testimonials-page">

<div class="thanks clearfix">
<p>................</p>
<img .../>
</div>

And the style sheet
Float applied to paragraphs

div.thanks img {width:30&#37;;}
#testimonials-page div.clearfix p {float:right;width:60%;}
.clearfix:after {content: ".";display:block;height:0;clear:both;visibility:hidden;}

I hope someone can make sense of that - thanks!

Four ways to fix it. One, give the p left padding equal to the image and float the image left. Two, keep it how it is, and give the image some bottom padding or margin to keep the text from comming around it. Three, keep it how it is, and give the p overflow auto and haslayout for ie (I think rarely do that). Four, give the p a width to keep it from going under the image. Or any combination of those. Untested…

I would suggest a simpler solution, something like this:

[EDIT: I mean ‘simpler’ than the original, rather than simpler than Eric’s, which I didn’t see!]

CSS

#wrapper {
   width: 100%; 
}

#wrapper img {
    width: 30%;
    float: left;
}

#col-right {
    float: right;
    width: 60%;
}

HTML

<body id="testimonials-page">
 
<div id="wrapper">
<div id="col-right">
    <p>Riusto odoloreet ute ... dolore ver sum autpat.</p>
</div>

<img src="image.jpg" />

</div>

See if that helps!