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

Is this what you're after:

http://jsfiddle.net/HbxTQ/8/

Fullscreen:

http://jsfiddle.net/HbxTQ/8/embedded/result/

(I've not yet made it cross-browser, only tested it in Chrome. What to ensure I have the idea right first.)

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!

Answer 3

How about setting the header to have a min-width of 970px and a max-width of 1022px? There are ie hacks to make min and max width work. This would make make scrollbars appear after the viewport shrinks to below 970 and as you stretch the viewport the header would grow up until 1022 after which it would stay 1022.

Answer 4

sg3s, you sound like a tough customer but I thought I'd throw my hat in the ring. None of us understands exactly what you need so please post the flattened design.

My assumption is that you need one or two layers with adjustable width behind a fixed 960px content container. Using float on adjustable width containers is going to make it nearly impossible to do what you want. Instead, use postion: absolute for a container holder (a.k.a. wrapper) and position: relative for the inner content containers. No Javascript is necessary.

My recommendation is removing #header from the primary #content container and separating the background image from the #header so they can be rendered and positioned independently.

http://jsfiddle.net/dylanvalade/ZcejP/

Answer 5

As far as I can tell, the best solution would be to restructure your HTML to put your header outside of the container.

<div class="outer">
    <div class="header">
        ...
    </div>
    <div class="container">
        ...
    </div>
</div>

CSS:

.outer { ... }
.header { 
    max-width: 1022px;
    min-width: 970px;
    margin: 0 auto; }
.container {
    width: 970px;
    margin: 0 auto; }

Demo: http://jsfiddle.net/Wexcode/tJXHF/

Answer 6

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/