When 100% width isn't.

Forum Moderators: not2easy

Message Too Old, No Replies

When 100% width isn't.

horizontal scroll bar problem

simonuk

1:50 pm on Aug 17, 2010 (gmt 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 :)

Super_B

8:17 pm on Aug 19, 2010 (gmt 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.

londrum

8:40 pm on Aug 19, 2010 (gmt 0)

instead of doing

body { background: blah; }

have you tried

html { background: blah; }