Look at this layout please!

[mumford]

Hi

I want to achieve this layout using CSS http://www.premier-resin-systems.co.uk/layout.jpg

I want it to be 3 columns, but as you can see the navigation part overlaps the red background image that I was going to put in my header div.

I would like some help if poss on how to put this design into divs before I plough staright in!!

Thanks for any help or advice!

[mark87]

You could use absolute positioning on the menu DIV to float it over the header.

[mumford]

This is what I have so far could you tell me what items I would position please

<div id="wrapper">
<div id="header">Header</div>
<div id="left">Left</div>
<div id="right">Right</div>
<div id="maincontent">Main Content</div>
<div id="footer">Footer</div>
</div>


body{
margin:0;
padding:0;
font:76%/1.5em Verdana,Arial,Geneva,Helvetica,sans-serif;
text-align:center;
}
#wrapper{
width:760px;
margin-left:auto;
margin-right:auto;
}
#header{
padding:0;
margin-bottom:0;
background:black;
}
#maincontent{
padding:0;
margin-left:200px;
margin-right:200px;
background:gray;
}
#left{
float:left;
width:200px;
margin:0;
margin-right:0;
padding:0;
background:green;
}
#right{
float:right;
width:200px;
margin:0;
margin-left:0;
padding:0;
background:red;
}
#footer{
clear:both;
padding:0;
margin-top:0;
background:blue;
}

[mumford]

Okay I have been able to come up with this, could someone take a look and see if what I have done looks right in terms of code and for seeing any probs!

http://www.premier-resin-systems.co.uk/layout

[ronaldb66]

I don't know what you've got planned for the "left" div, but since it seems to be going to sit beneath the menu it would be more logical if both the menu and the "left" div to be at the same level, structurally.
I don't feel this menu should be part of the header, anyway.

Otherwise, it's coming along nicely; it wasn't going to be an easy task from the start, considering the rather complicated header image, but you're well on your way.
Perhaps you could add a little more placeholder content to give a clearer indication of the intended use of in particular the side boxes -since of course "footer" is kind of a no-brainer...