HTML - CSS - Layout

Question

I've a page here: http://www.balibar.co/?dating=does-friends-with-benefits-work

With the larger first DIV on the left you can see an image with a logo and text showing and a black background.

Next (with some opacity) is a white background with words (friend with benift etc)... This top parts site as i want it to..

Once the black logo/text part ends I want the text to flow to fill the entire white section below. Currently its held in the same DIV and doesn't flow across to the left.

 div#wrapperArticle {
    padding: 10px;
     width: 364px;
 }

If I remove the width: 364px it does flow across but then covers the black/logo/text section that I want to keep as is - visable.

Is there a way to keep the black/logo/text part visable, the text running over the rest of the image as it is with opacity and then the text to flow into and fill the area below?

I've tried lots ideas but I can't get this combination to stick..

thx Adam

Answer 1

Merge the left and middle column in the same <div> and then make the image float: left; with padding on it.