Search code examples
cssheaderwidthfooterfixed-width

Most efficient way of having 100% header and wrapper with fixed content within?

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

Solution

  • 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" :)