Aligning Content Next to an Image

Sometimes I have text that wraps underneath images when I really want text nicely aligned along side it. Here are some screen shots of the problem then the desired look:

Problem:

Desired Look:

As you can see in the problem screen shot the text wraps underneath the photo. Not cool. I've encountered this a few times recently and I keep having to bust my brain to figure out the bast way to code this. My first instinct is to use a padding or margin on the image to move the text where I want it. Every time I try this I quickly realize it's not the way to do it if you have different lengths of content. My next thought is to float the text, but that soon gets overly complicated and messy. So my favorite solution so far is the following...

HTML:

<img id="pic" width="120px" height="200px" src="jacob-pic.jpg"/>
<div id="content">
   ...where all your content and text goes...
</div>

CSS:

#pic {
   float:left;
}

#content{
   padding-left: 150px;
}

Where the padding-left is the width of your image plus the amount of space you want between the picture and the content.

Here is a working example:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Thanks for reading and I hope this helps!

Update (2-16-2011)
Found another neat solution to this issue on the WebDesignerWall using overflow.