I’ve looked everywhere, but I can’t find an answer to my question - TBH I’m not really sure what I should look for.
I have a problem with a fixed width design. The design has a width of 900px but has a background of 1100px, where the 900px is centered in the 1100px (so margins of 100px on either side).
Now, I don’t want to make the wrapper div 1100px wide, because that causes vertical scrollbars on smaller viewports - and vertical scrollbars are ugly.
So I thought I’d make a div of 900px, center that using margin: 0 auto and then put a div inside that with position: absolute; left: -100px; width: 1100px; and put the background in there.
Now, when you view that in a viewport > 1100px all looks fine and when you make the viewport smaller the 100px on the left of main 900px div starts to disappear out of the viewport without any consequences, but the right 100px causes the browser to draw vertical scrollbars to scroll to the 100px background on the right side, whereas I’d like it to behave like the left side: just disappear out of the viewport and don’t create scrollbars.
I found that overflow-x:hidden or overflow:hidden on the body works, but then people with a viewport smaller than 900px can’t see the whole width 900px content, and that is definitely not what I want …
So my question is this: is what I want possible using CSS only?
The background contains some decorative elements that look nice on a wider screen, but if a screen isn’t that wide it’s not that bad if the viewer can’t see them, and of course they would never even know that they are there in the first place
I was looking for that several months ago, but couldn’t figure it out and gave up (it only broke on resolutions lower than 1024x768 so I didn’t really care anyway). Good to know it is possible after all!
Nope, that doesn’t work.
Thanks for all help you guys, I really appreciate it
You know, now that I think about it, that could actually be ok in IE6 if you are using a centered bg image instead of background color. Since you just need it to hold the image the extra width shouldn’t be an issue as long as it keeps it centered.
Now my question is, did you get it all to work how you wanted it to?