style_system | Help please? (Transmogrified) Wrapping text around userpic (Reply)

Hi, all!
I know absolutely nothing about CSS (I'm sure you all love to hear that phrase...XD), and in a fit of insanity decided to make a CSS layout anyway, by engaging in extreme amounts of trial-and-error. You can see the layout on my journal now; it's basically Transmogrified with some superficial changes. (stylesheet, in case it helps)

I think I've finally reached the limit of what I can do with trial-and-error, so I turn to you kind folks now for help!

1) I managed to move the userpics down into the box with the text of the entry, but I don't know how to make the entry text wrap around the userpic instead of the userpic overlapping it.

Here's how the code for the userpic currently looks:

.entry-title, .comment-title { margin: 0; }
.has-userpic .entry-title, .has-userpic .comment-title { margin-right: 120px; }
.entry .userpic a, .comment .userpic a { right: 10px; left: auto; }
.entry .userpic a, .comment .userpic a {
display: table-cell;
position: absolute;
top: 10px;
width: 114px;
height: 114px;
text-align: center;
vertical-align: middle;
padding: 7px;
}
.entry .userpic img, .comment .userpic img {
border: none;
}

OLD PROBLEM SOLVED, NEW PROBLEM ACQUIRED:
changing the userpic from position: absolute to float: right gets the text to wrap around the userpic--thanks,

sam_gardener!--but the userpic is now oddly low:

adding a float: left to the entry title like so:
.has-userpic .entry-title, .has-userpic .comment-title {float: left; margin-right: 120px; }
lets the userpic move up but the date & name of the poster interact with the two floating elements in a variety of bizarre ways: