Question

I want to have a 1024px width website with a gradient background image. I have a panel that’s 1132px wide because I want widescreen resolutions to see where the panel ends. However, I do not want a scroll bar.

So imagine a 1024px square, and a 1132px panel centered through it. on a 1024px wide screen/browser it seems the panel never ends without a horizontal scrollbar but when you look at it on a 1280px wide screen you’ll see the panel ends. Can anyone help me achieve this? IE6 compatible preferred. Thank you!

Answer 1

Combining the usual centering technique with overflow-x: hidden; seems to do the trick:

body { overflow-x: hidden; }
#content {
  width: 900px;
  position: absolute;
  left: 50%;
  margin-left: -450px;
}

Live demo: http://jsfiddle.net/brianpeiris/RRqAq/show