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%;}
#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…
ralphm
February 16, 2010, 11:06pm
3
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!