It's a pretty simple fix.
HTML Code:
#logo {
float:left;
position:relative;
top: -102px;
margin-bottom:-164px;
}
#content_container {
background-color:#CCCCCC;
margin-left:3px;
height:400px;
clear:both;
}
I set the content div to clear under the logo, allowing it to move left, then applied a negative bottom margin on the logo to "pull" the content div up vertically.
The content container also has a 3 pixel left margin applied so that it aligns more precisely with the left edge of the logo.
FYI: With this code, the logo div will rest above any text or images you place in the content area, so text will flow behind it.
I'm assuming that your navigation menu will reside directly beneath the logo. If that's the case, you can use the following to constrain your paragraph text so that the main content stays to the right of it.
HTML Code:
p {margin-left:230px; margin-right:20px;text-align:left;}
#logo {
float:left;
position:relative;
top: -102px;
margin-bottom:-164px;
}
#content_container {
background-color:#CCCCCC;
margin-left:3px;
padding-top:10px;
height:400px;
clear:both;
}
You'll also note that this works in IE6, IE7, FireFox, Opera, Safari for Windows and Google Chrome.
Enjoy!