How to position a div to be visible but not count towards document width

Question

Today I came across a very nasty problem, I need to make the front-end layout for a website and it has a certain design element on the page that puzzled (even) me.

Now I am not exactly unfamiliar with html, css positioning, making layouts etc, so please don't make 'guesses' as to how I could solve it. I want a working example.

Here is a jsfiddle with my code and problem: http://jsfiddle.net/sg3s/A9vzA/ http://jsfiddle.net/sg3s/A9vzA/15/

What is currently happening;

The #container has a min-height of 100% (red background) width of 970px. This is the width the page must have as a minimum. The #top (lightbrown background) div is irrelevant for the problem but part of the design.

The problem lies in #header (purple background) which currently has a width of 1022px (too wide for 1024px resolution + a scrollbar, even with a maximized window) and a negative left margin to keep it centered on the container, which is what needs to happen. When the width of the screen width falls below 1022px a horizontal scrollbar apears as the thinnest element on the page is 1022px wide. (its behaviour is the same with position absolute and a negative left offset)

What I want to have happening;

I want the 'overflow' of #header over #container to dissapear into the sides and only get a scroll bar as the viewport gets below 970px wide. (If someone can rephrase this )

Let me be a little bit clearer on this:

• The 100% height layout needs to stay and be compatible with IE7+
• The header needs to be centered over the container, this is the reason it is inside it in my example but be my guest to take it out if that solves the problem.
• My example looks and acts correct as long as the viewport is large enough to accomedate the header.
• The trick is to make it look and act the same while the sides of header overflow into the sides of the viewport when the viewport is too slim to fit that header.
• Updated the example to make the change / centring a bit more obvious.

If possible I want the layout to support all the way down to IE6 though IE7+ will be fine. The final page will prompt to install Chrome Frame anyway. And ofcourse don't forget about Chrome, FF 3.5+.. (Opera?). Use of JS will not be acceptable, unless you can convince me that there is absolutely no other way, but jQuery will be present on the page.

Thank you for at least trying! (Challenge yourself! :D)

Answer 1

This code worked for me in FF/Chrome/Safari/Opera. Can't test in IE because I'm on Mac now, but must work in IE 7+

Example: http://jsfiddle.net/XVraD/3/

Base idea is to wrap #header in another container with "width: 100%; min-width: 970px;" and place in outside of #container, so it will do all the overflow to you.

EDIT 2: Solution that works in IE6: http://jsfiddle.net/XVraD/9/

EDIT 3: This version is fixed to have height 100% in modern browsers and old IE's: http://jsfiddle.net/XVraD/9/

Answer 2

It is a hard one, the only real solution I can come up with is this that you use Media queries like this:

@media all and (min-width: 970px) {
  body, html {
    overflow-x: hidden;
  }
}

It is not supported by old browsers, there you would need a Javascript!