homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

When 100% width isn't.
horizontal scroll bar problem

10+ Year Member

Msg#: 4188238 posted 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 :)



Msg#: 4188238 posted 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.


WebmasterWorld Senior Member 5+ Year Member

Msg#: 4188238 posted 8:40 pm on Aug 19, 2010 (gmt 0)

instead of doing
body { background: blah; }

have you tried
html { background: blah; }
Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved