I'm having some problems using overflow-x: hidden. On my page I have 2 images on either side of a central column of content. What I want to achieve is a way to not get horizontal scrolling even if either of the images go off the page. I've set the body to have overflow-x: hidden but if the image on the right side goes off the page the horizontal scroll bar appears and the page looks all wonky because now the background of the body style is off-center. This even occurs if I put the images in their own container. This functions properly in FF, but in safari and IE, it looks weird.
i'm not sure what you mean, could you post a link? if you are not bothered about the pics being chopped off then you could just set the images either side as the div background image in the css and have the background position set to the right/left of the div so the ends get chopped off.
Here's a link to the page: http://queensdc.ath.cx/MMORPG/index.php it's the 2 characters on the side that I want clipped if they go off the page.
Hmm, I was right-- these were invented by Microsoft, but people found them so useful that they were added to CSS3. Mozilla started supporting them at FF1.1. However, as I was under the impression that it was an MS thing, I never used them. I would actually do what wd suggested--- set the two images (as one) in the background. The part in the middle has a set width. I don't see it expanding. Right now, if someone has a browser screen smaller than the width of your middle text part, they cannot scroll from side to side in FF. Which sucks for anyone who wants to read it. Since that middle white part is a set width, you know you can have one large background image containing the two characters. Were this a flex-width page that would not be possible. Removing the overflows etc and having the middle part as a set width will mean that a horizonal scrollbar only shows up when the user's browser window is less that that fixed width (so theys can scroll to read the content, the important part of the page). Those with a larger browser window will see the characters. I have built two pages which kinda has this setup-- I get lots of grey showing from my background because I have a wide screen. Scrollbars only show up when the screen gets too small to show all of the middle part (insurance sites, where all content must be available : ) I have seen this effect done in another way. Someone had a setup like this for a gallery. There were superfluous images on each side. Deathshadow did a re-rwite with his lean 3-column 100% height table model (one of the few models where he feels a table is appropriate). It had the effect of only the center part generating a horizontal scrollbar when the middle td was too big for the screen. I didn't look at it closely enough to remember how he had that set up exactly. *Edit sorry I'm not being clear... the characters would go as a background of the body. The middle part then is a wrapping container with the repeat-y sidebar things, and inside that another box with the white, the header, and the text.