Q:

CSS positioning images and text

I'm trying to get some text between two images.   The images are positioned correctly, but there are some weird design issues that are cropping up. 
Current Page (web page)
Design Plan (jpg)
What I'm trying to figure out is this:

Background must stop before the right edge of the right image (the girl)
Background must extend the height of the right image
Vertical bar underneath left edge of right image. 
Text wrapping before vertical bar
Bars to left of bottom text in center

Any help would be appreciated! 

A:

I'd advise against splitting the image up, as Aiden suggests.  This is messy and not exactly a modern way to go about it.  Try something like this:
.top-pic {
    float: right;
    margin-top: -200px;
}

Change the margin-top assignment to however high you want the image in pixels.  The only issue left is to scale the width of the top-text div to accommodate the image.  One way to do this would be to set padding-right: 250px; or so to .top-text h1 and .top-text h2.