Simple DIV-Layout: Header, Navigation, Content - css

Question

I'm looking for the classic page layout:
Header 800 Pixel, Navi (left) 200 Pixel, Content (right) 600 Pixel
Is it possible to put this in 3 DIVs only?
<div id="header">Header</div>
<div id="navi">Navi</div>
<div id="content">Content</div>
Because every layout I've found so far is built this way:
<div id="header">Header</div>
<div id="panel">
<div id="navi">Navi</div>
<div id="content">Content</div> <!-- position absolute left:200px -->
</div>
Thanks!
Roman

Answer 1

You surely can do it the way you told.
The thing is that code :
<div id="header">Header</div>
<div id="panel">
<div id="navi">Navi</div>
<div id="content">Content</div> <!-- position absolute left:200px -->
</div>
Will be easier to make and maintain. For example, you just need to specify a single margin-top on #panel to control margin between header and nav+content. With your code, you'll have to specify it twice, on #navi and on #content.

Answer 2

Don't think it's too complex-- just set the header to width 100%. Check it out: http://jsfiddle.net/ASy67/
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
And the CSS:
div {
height: 100px;
}
#header {
background: #f00;
width: 100%;
}
#left {
background: #0f0;
float: left;
width: 200px;
}
#right {
background: #f0f;
width: 600px;
}
With this example, the content does appear behind the left sidebar. You can fix it by either adding float: right; to the #right, or padding-left: 200px; to #right.