TAGS :Viewed: 3 - Published at: a few seconds ago

[ 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 seem 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.

Answer 1

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.

Answer 2

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:




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




In the #footer { rule change:

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


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:

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:
But then box-shadow doesn't work in IEs < 9 anyway: