CODEWITHSUNDEEP
javascripthtmlcss
AJ Naidas
AJ Naidas

Reputation: 1424

header not complying to 100% width

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!

Upvotes: 2

Views: 121

Answers (4)

Dipak
Dipak

Reputation: 12190

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.

Upvotes: 0

Jason Goemaat
Jason Goemaat

Reputation: 29214

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">

Upvotes: 0

Guffa
Guffa

Reputation: 700362

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.

Upvotes: 1

xivo
xivo

Reputation: 2054

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

Upvotes: 0

Related Questions