The important part is that you have your <h3> (in this case, an image replacement) floated left. Any html that comes after your <h3> will now wrap around it. Take a paragraph for example:

That’s the easy part. Now, how do we keep that paragraph from wrapping? Your first instinct might be to increase the height of .callout h3, we’ve all tried to get away with that method in the past. You’ll tell yourself – the content will never be more than five lines long. Deep down inside – you know this isn’t the case & that you’ll be editing that bit of CSS in the near future. And then a month after that; and then the following month and then… well you’ll be editing that css until the entire site gets redesigned; which you know isn’t happening anytime soon.

So, we need a future proof method to keep this content tight, the way your pixel princess intended it to be.

One solution might be to put a width on the paragraph tag and float it right. Let’s try:

.callout p {
width: 160px;
float: right;
}

Resulting in:

Not a bad start. With this in place, any content in a paragraph tag will never wrap under your image. Unfortunately, chances are this content is variable & is being pulled from a database. Who knows what HTML will be spit out. It’ll fall apart if say, instead of a paragraph, you had an unordered list:

This doesn’t quite hold up very well, does it? So let’s change the .callout p { } declaration to .callout * { } instead. The * selector will select P’s, UL’s & any HTML that falls under .callout :

.callout * {
width: 160px;
float: right;
}

Our new declaration solves that quite nicely indeed. There’s just one problem. What if some HTML appears deeper? Take these potential list items for example:

There it is, exactly what we want & it’ll work in all current browsers (including IE!). Throw any HTML at it, with any varying amount of content & you’ve got some lean & mean & pretty basic CSS to prevent it from wrapping under your floated image.