Question

what is the most efficient way of having a 100% header, then a fixed width content, and a 100% footer?

I’m trying to limit my divs to the maximum, but now i’m quite stuck…

anybody help?

Thx a lot

Answer 1

Here is the simplest version:

<div class="header">
    <p>Header</p>
</div>
<div class="main">
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
</div>
<div class="footer">
    <p>Footer</p>
</div>

CSS:

div {
    margin:0 auto;
}
.main{
    width:400px;
}

http://jsfiddle.net/Madmartigan/adkfF/3/

Here is a version with the header and footer’s inner content fixed width to align with the main content:

http://jsfiddle.net/Madmartigan/adkfF/1/

3 divs is just about as simple as you can go, I assumed you wanted to minimize your divs and not “limit my divs to the maximum” 🙂