header not complying to 100% width

Problem

kindly check out this website:

http://www.imageworkz.asia/cranium

try resizing the window so small to the point that a horizontal scrollbar appears. Drag the horizontal scrollbar to the right and then the problem occurs. The header and footer does not seem to adjust accordingly. In the css, the header and footer element has a 100% width.

Any ideas on how to fix this? Thanks!

Problem courtesy of: AJ Naidas

Solution

That's how 100% width works. The width of the element is the same as the parent element, and as there is a scroll bar it's narrower than the page.

Solution courtesy of: Guffa

Discussion

I don't see an issue, but if you want the header to resize, I suggest using media queries to adjust based on screen size.

Media Query Examples

Discussion courtesy of: xivo

Your article element has a fixed width so it overflows the container when the container shrinks. You could try floating your container div, that should make sure that it doesn't shrink.

<div id="container" style="display: block; float: left">
Discussion courtesy of: Jason Goemaat

You need to use CSS3 multiple background images to the 'body' elements and then use CSS3 PIE to make it work in IE http://css3pie.com/documentation/supported-css3-features/#pie-background

body{
    background: url("/cranium/img/2 MAIN/bg.jpg") repeat 0 40px, url(headerbg.png) repeat-x left top, url(footerbg.png) repeat-x left bottom;
    -pie-background: url("/cranium/img/2 MAIN/bg.jpg") repeat 0 40px, url(headerbg.png) repeat-x left top, url(footerbg.png) repeat-x left bottom;
    behavior: url(PIE.htc);
}

Remember -pie-background is relative to HTML, not to CSS This will definitely solve your problem.

Discussion courtesy of: Dipak

This recipe can be found in it's original form on Stack Over Flow.