What is preferred way to code when only header and footer's background is flexible only not content?

What is preferred way to code when only header and footer's background is flexible not content?

Currently I use this method? Is there any better way to do this?

<header style="background:red>
<div style="width:950px; margin:0 auto">
</div>
</header>

<div id="content" style="width:950px; margin:0 auto">

</div>


<footer style="background:blue>
<div style="width:950px; margin:0 auto">
</div>
</footer>
开发者_运维技巧

I used inline css just for example

actual mark-up is

 <header>
    <div id="header-inner">
    </div>
    </header>

    <div id="content">

    </div>


    <footer>
    <div id="footer-inner">
    </div>
    </footer>

I'm making website for Desktop and iPad both. iPad has fixed width but Desktop can be anything.

---

header and footer make 100% width and content fix it a 95% width, so header and footer are flexible.

css:

header {
width:100%;
background:#ccc;
}

footer {
width:100%;
background:#ccc;
}

#content {
width:95%;
margin:0 auto;
}

---

Here's the other way of doing it. Not necessarily better. Your method looks fine.

<div class="wrapper">
    <header>
    </header>

    <div id="content">
    </div>

    <footer>
    </footer>
</div>

.wrapper { width: 950px; margin: 0 auto; }
header, footer { margin: 0px -9999px; padding: 0px 9999px; }

---

Why do you add another <div> in the header and footer?

Also please drop the inline css (if it isn't there just for this example).

Other than that your code looks fine with me