How to position a div to be visible but not count

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

Having this one in Chrome.

http://jsfiddle.net/A9vzA/10/

Put an inner div inside the #header

The header has position relative and no float and with 970px

The inner div has position fixed and width 1022px and margin 0 -26px

--edit

but doesnot work in IE7

--edit

this works in IE7, too http://jsfiddle.net/A9vzA/11/ just add another inner div

The first inner div is position fixed and width 100% and text-align center

The second inner div is margin 0 auto and width 1022px

Can anyone test it in IE6

--edit

nope doesnot work if you got content in your #container. position fixed is no option

Answer 2

http://jsfiddle.net/QrVJJ/

#header is positioned outside and above (with z-index) #top. It also gets margin: 0 auto; and the background is positioned top center with min-width:970px and max-width:1022px.

#header {
    margin: 0 auto;
    z-index:5;
    min-width: 970px;
    max-width: 1022px;
    height: 201px;
    background: #390419;
    overflow:hidden;
    background: transparent url(http://4.bp.blogspot.com/_rScBRKlTdoE/TC6rNWAyD9I/AAAAAAABOTo/BWkJH9ymovo/s1600/IMG_9692.jpg) no-repeat top center;
}