How can I prevent fixed width elements from being pushed around?

I currently have a footer that uses a 3 column layout with a fixed center and fluid sides in order to get a nice box shadow effect. When the window is too small however, it pushes the footer to the left, and messes everything up.

I can't s开发者_如何学编程eem to figure out how to make sure the footer divs do not get pushed around. I keep running into this problem with my layouts.

The layout I am working on is here, and a screencast showing the problem is here.

The easiest solution is simply to add min-width:980px to #container.

#container {
    background: none repeat scroll 0 0 #A8D9A7;
    height: 100%;
    min-height: 100%;
    position: relative;
    z-index: 5;
    min-width: 980px; /* add this */
}

The 980px figure comes from the width:960px + padding-left:10px + padding-right:10px of the #content-container.

The container element for your main page body (<div id="body">) has computed padding-left of 10px, and the second container element, (<div id="content-container">) adds another padding-left of 10px, meaning your main body is padded from the left by 20px.

Whereas the container for your footer (<div id="footer-container">) has computed padding-left of 0.

If you add this, it will fix your problem. #footer-container {padding: 0 20px;}
Revised as the above solution messed up bottom box-shadow.

In the #footer-left-outer { rule change:

margin-right:470px;

to:

margin-right:-490px;

In the #footer-right-outer { rule change:

margin-left:-470px;

to:

margin-left:-490px;

In the #footer { rule change:

padding: 10px 10px 10px 10px;
width: 940px;

to:

padding: 10px 30px;
width: 980px;

I now understand why you were using the outer-right and outer-left.

I found a different solution that includes the partial box-shadow effect:
http://jsfiddle.net/nottrobin/Cr4NF/10/

It avoids the need for footer-left-outer and footer-right-outer but I'll leave it up to you to decide if it's neater.

It makes use of :before which only works in IE8 onwards:
http://caniuse.com/#search=:before
But then box-shadow doesn't work in IEs < 9 anyway:
http://caniuse.com/#search=box-shadow