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>

```