Floating with an image between columns?

Kay, sorry if this has been explained before, but I couldn't find it in the searchy thing.

So, I'm a complete CSS newb, and I'm trying to accomplish a layout similar to this one with CSS, but I'm getting overlap, when I want to wrap around the image. This is what I'm getting. (Only one column so far, but you get the idea)

I noticed they accomplished the other one with tables, and splitting that image in the middle up into parts to get the text to start partway down the image. I was also thinking of just sticking it in the middle (vertically) of the paragraphs too, so it'd be awesome if I could find a simple way to use CSS positioning and automatically wrap text around images.

Thanks in advance for any help, love,
Oya

Edit: Pardon, I should stick in my code, shouldn't I?

Code: Select all

<img style="position: absolute; left: 45%; top: 5px; float: left; width: 141; height: 111;" src="http://i46.photobucket.com/albums/f141/oyabubbles/Miskellaneous/milkmandan.gif">
<div style="position: absolute; width: 30%; right: 50%; padding: 5px; top: 50px;"><p align=right>blah blah<br />more blah stuff<br />keep on trucking<br />there, Mister text,<br />sir!</p></div>

Edit2: I noticed that it'll float it off to the right if I remove the positioning, but, then I can't position the picture in the middle....gah! I can do everything but what I want!

Neverming I, I think I found what I wanted to do, unless someone can give me a good example anyways. Thanks.

There is really no way to acheive that exact effect in CSS if you want it to work like the other does when the text-size is increased in a browser. You'd have to float the paragraphs and put spans on a line to break it away from from the float. It's rather fishy, but it'd work.