div doesn't extend all the way to end of page when 100% width specified

I'm having an issue where I have certain elements whose width property I specified as being 100%.

This works nearly all the time. However, when I resize the browser window such that you now have to scroll to the right side of the page to see the whole page, I notice that the div only extends as far as what was originally in browser's viewing area.

That seems to make sense I suppose but it looks really weird if the user decides to scroll to the right. Is there some kind of workaround for this? I saw this answer but I'm wondering is there a开发者_运维技巧nother solution that doesn't use tables?

#header {
    height: 115px;
    width: 100%;
    background-color: #CDC1C5;
}

---

Make sure your body and html tags are also stretched by 100%.

Try this:

CSS

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

.box {
    width:100%;
    height:200px;
    background-color:#000;
    color:#fff;
}

HTML

<div class="box">
    box content
</div>

---

Like andres said, make sure they body and any container divs are set to 100% and also make sure margins are set to 0, margin:0 auto I occasionally forget to do this, also if that fails you can do a bit of a "hack" and absolute position it: dividname {position:absolute; top:0; left:0; width:100%;} if this doesn't work and you are building live then send me a link, otherwise send me a screen shot if possible.

---

Unrelated to the correct answer, sometimes it has nothing to do with the body nor the div itself, but maybe a totally unrelated element, what usually makes me find if that's the case, is to simply comment all the html within the body tag. Leaving only the div I want to check