Welcome to WebmasterWorld Guest from 54.146.201.80

Forum Moderators: not2easy

Message Too Old, No Replies

When 100% width isn't.

horizontal scroll bar problem

     
1:50 pm on Aug 17, 2010 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 9, 2003
posts: 503
votes: 0


Hi folks,

I have various parent containers with 100% width and they have background images which stretch across the width of the screen. So far no problem.

If I now reduce the browser window size so I get the horizontal scroll bar something weird happens. At first glance it is correct because the 100% width has filled the visible area of the screen but when I move the horizontal bar so I can see the excess content the backgrounds all stop at the initial (visible) screen area and do not fill the overflow.

The two exceptions I've found to combat this is the body and a table which both honor the 100% width and fill the entire screen (visible and excess). But divs, forms etc only do 100% of the initial visible screen area and won't go past that.

I'm hoping that makes sense and does anyone know a workaround?

I can't use the body as it is already being used and there is no way on earth I'm wrapping my code in a table to make it work :)
8:17 pm on Aug 19, 2010 (gmt 0)

New User

5+ Year Member

joined:Aug 17, 2010
posts:11
votes: 0


Do you have an example url?

Usually, I'll run into this sort of thing when something has width:100% and padding:foo on it. Margin, padding, and border properties will always render OUTSIDE of the width, pushing it wider than <body>

I'll also throw in my usual recommendation for firebug here: [getfirebug.com...] Install that in Firefox, right-click on the offending item, and choose Inspect Element. Chances are, that will show you everything you need to know.
8:40 pm on Aug 19, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Feb 12, 2006
posts:2493
votes: 22


instead of doing
body { background: blah; }


have you tried
html { background: blah; }