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.