Как я могу предотвратить перемещение элементов фиксированной ширины?

Question

В настоящее время у меня есть нижний колонтитул, который использует 3 колонки с фиксированным центром и текучими сторонами, чтобы получить хороший эффект тени от коробки.Однако, когда окно слишком маленькое, оно сдвигает нижний колонтитул влево и все портит.

Кажется, я не могу понять, как сделать так, чтобы div-фрагменты нижнего колонтитула не перемещались.Я продолжаю сталкиваться с этой проблемой с моими макетами.

Макет , над которым я работаю, находится здесь , а скринкаст, показывающий, что проблема здесь .

Answer 1

Самое простое решение - просто добавить min-width:980px к #container.

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

Число 980px взято из width:960px + padding-left:10px + padding-right:10px из #content-container.

Answer 2

Элемент контейнера для тела главной страницы (<div id="body">) вычислил padding-left из 10px, а второй элемент контейнера (<div id="content-container">) добавляет еще padding-left из 10px, что означает ваш основнойтело дополняется слева 20px.

, тогда как контейнер для вашего нижнего колонтитула (<div id="footer-container">) вычислил padding-left из 0.

Если вы добавитеэто, это решит вашу проблему.#footer-container {padding: 0 20px;}
Пересмотрено, как приведенное выше решение испортило дно box-shadow.

В #footer-left-outer { изменилось правило:

margin-right:470px;

на:

margin-right:-490px;

При изменении правила #footer-right-outer {:

margin-left:-470px;

на:

margin-left:-490px;

При изменении правила #footer {:

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

to:

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

Теперь я понимаю, почему вы использовали outer-right и outer-left.

---

Я нашел другое решение, которое включает частичный эффект box-shadow:
http://jsfiddle.net/nottrobin/Cr4NF/10/

Это позволяет избежать необходимости в footer-left-outer и footer-right-outer, но я оставлю на ваше усмотрение решение, является ли он более аккуратным.

Используется :before, который работает только в IE8 и далее:
http://caniuse.com/#search=:before
Но тогда box-shadow не работает в IE <9, в любом случае: <br>http://caniuse.com/#search=box-shadow