need help with image/div position

Hi all,

I want to make a layout as follow: (see image)



I don't know how to place the logo on top (and on the left) of both menubar1 and menubar2 using position (relative/absolute)

I could use float left/right, but i guess using position would be easier if it is possible.

Here is the html and css codes I have so far:

<div id="fulltop">
	<div id="menubar1">Home</div>
</div>

<div id="menubar2">Home</div>

<div id="logo">
<img src="ogo.gif" />
</div>

Code (markup):

#fulltop {
	width: 100%;
	height: 40px;
	font: 14px;
	background-color: #333;
}

#manubar1 {
	width: 950px;
	margin: auto;
	margin-left: 100px;
	color: #FFF;
}

#menubar2 {
	width: 950px;
	margin: auto;
	margin-left: 100px;
	color: #FFF;
}

#logo {
	width: 90px;
}

Code (markup):

 

use blue strip as background in body or allpage container.
Both menu place in container with you width 950px
Position logo in this container absolutly.

 

container
2container
logo
menu1
menu2
/2container
/container

CSS:
container: width 100%; text-align:center;
2container: width 950px; position: relative; text-align:left; margin: 0 auto;
both of menu: padding-left: 'width of logo'
logo: position: absolute; left:0; top:0;

 

thanks a lot.

I will give it a try when I got home.