kindly check out this website:
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!
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
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">
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
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;
-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.