This layout needs some serious help!

Hi
If you take a look at http://www.bullsigns.com/layout.gif, this is the layout I am trying to acieve.
2 colums 1 floated left 1 floated right, with the navigation placed over them. I presume this would have to be absolute positioned.?
Could someone give me a start on the css code and html on how to achieve what I want.
I have this so far
<div id="wrapper">
<div id="navigation">navigation
<div id="left">left
<div id="right">right
</div>

#wrapper{
width:760px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
#left{
float:left;
width:290px;
height:500px;
margin:0;
margin-right:0;
padding:0;
}
#right{
float:left;
width:290px;
height:500px;
margin:0;
margin-right:0;
padding:0;
}
#navigation{
position:absolute;
}
Thanks alot!!!

Okay

I have managed to come up with this http://bullsigns.com/test/

In FF looks how it should but IE you only see some of the bground image in the left div.

Why is this?

remove the red line from your CSS

/* Hide from IE5-mac. Only IE-win sees this. \*/
* html #left{height:1%;margin-left:-3px;}
/* End hide from IE5/mac */


I couldn't get the navigation to show on IE6. I think it's the floated elements. I tried z-indexing to no avail.

I'm not sure if this what your going for but it might be a little easier way of doing it.

to avoid needing absolute:positioning and the hell it can produce, try this:

<div id="header"><div id="banner"></div>
<div id="navigation"></div>
</div>
<div id="content"><div id="left"></div>
<div id="right"></div>
</div>

notice there is code immediately after any <div> tag. this is stopping the IE white space bug...

corresponding CSS for body:
div#left {
float:left;
margin: 0;
width: 222px; // or whatever the width of left column
}
div#right {
margin-left: 111px; // this is IE width, make it half what left div width is
width: 222px;
}
html>body div#right { margin-left: 222px; } // for non-IE browsers


now as for the navigation, u may want to use an unordered list to create that menu effect, otherwise just use the code in your sample...

as for the banner - set a defined height, have the logo that height... any text must go to the right of it... otherwise, make it a span and position it to the right using margin-left (and the corresponding IE correction as shown)...

if u want full code + clarification, i will post it...

Could you post me the full code and clarification, please.

This is what I have come up with before I read your post

http://bullsigns.com/test/