设置宽度div，防止其他div跨越100％宽度

Question

I seem to be having some trouble with 100% widths. I have 3 divs, header, content and footer which are relatively positioned. I have set a width of 600px on the header and a width of 100% on the content and footer. However if I resize the browser when I use the horizontal scrollbar the 100% width divs are cut off and don't go all the way across to match the 600px div...how can I fix this?

CSS

#header {
    position: relative;
    width: 620px;
}

#content, #footer {
    position: relative;
    width: 100%;
}

HTML

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

Answer 1

<div id = "container">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>


#container {min-width:620px;}

See example: http://jsfiddle.net/calder12/xN2PV/3/

Point to note. min-width is not supported in IE6. I doubt this matters, if it does you'll need a different solution.

Answer 2

Set width to "auto" for #content and #footer. Divs, being block elements, will automatically consume 100% of the available width (sans margin if set) in their immediate parent element.

As such, if #content and #footer are contained within #header or any other explicitly sized element , then they will never be wider than the specified width.