Макет с фиксированной шириной с нижним колонтитулом полной ширины

Question

Мне нужно создать фиксированную страницу шириной 980 пикселей с полноразмерной (жидкостной, жидкостной, более широкой, чем 980 пикселей) и горизонтальным меню. Я надеялся, что просто поместить их за пределами содержимого div с фиксированной шириной будет делать это, но он не работает для нижнего колонтитула (только для меню). Нижний колонтитул до сих пор сжимается до 980 пикселей ширины содержимого. И когда я иду на страницу и проверяю HTML через Firebug, я вижу, что нижний колонтитул магически внутри раздел содержимого. В принципе, все, что я помещаю после закрывающего тега обертки, втягивается в содержимое div. Но как??

Вот HTML:

<div class="wrapper"> 
    <header id="header"></header> 
    <nav id="horizontal_menu"></nav> 
    <div id="content"> 
    <%= yield %> 
    </div> 
    <div class="push"></div> 
</div> 
<div id="footer">some text</div> 

CSS:

html, body { 
    height: 100%; 
} 

.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -80px; 
} 

#content, { 
    width:980px; 
    margin:auto; 
} 

.footer, .push { 
    height: 80px; 
} 

#footer { 
    background:#393939; 
    color:#777; 
    clear:both; 
} 

(это Rails приложение, если это имеет значение)

EDIT: Оказывается, проблема только на главной странице. Другие страницы все в порядке. «Выход» в содержание DIV зависит от страницы, так вот frontpage.html.erb, который заменяется на «выход»:

<div style="color:#515151;font-size:14px;"> 
    <div id="navslides"> 
    <nav id="sidebar"> 
     some list 
    </nav> 

    <div id="boxes"> 
     <div class="box"></div> 
     <div class="box"></div> 
    <div class="box"></div> 
    </div> 
    </div> 
    <div id="latest"> 
     <div class="frontarticle"> 
     <div class="frontarticle"> 
    </div> 
    <div class="righties"> 
    <ul class="tabs" data-persist="true"> 
     <li><a href="#view1">text</a></li> 
     <li><a href="#view2">text</a></li> 
    </ul> 
    <div class="tabcontents"> 
     <div id="view1" style="min-height:200px;">text</div> 
     <div id="view2" style="min-height:200px;">text</div> 
</div> 
    <div class="righties" style="margin-top:40px;margin-bottom:400px;"> 
    text 
    <div> 

Answer 1

Вы не закрываете ваш ДИВ-х правильно, с дополнительным HTML вы в курсе, ваша страница разметка будет выглядеть следующим образом:

http://jsfiddle.net/TC4S5/

<div class="wrapper"> 
    <header id="header"></header> 
    <nav id="horizontal_menu"></nav> 
    <div id="content"> 
    <div style="color:#515151;font-size:14px;"> 
     <div id="navslides"> 
      <nav id="sidebar">some list</nav> 
      <div id="boxes"> 
       <div class="box"></div> 
       <div class="box"></div> 
       <div class="box"></div> 
      </div> 
     </div> 
     <div id="latest"> 
      <div class="frontarticle"> 
       <div class="frontarticle"></div> 
       <div class="righties"> 
        <ul class="tabs" data-persist="true"> 
         <li><a href="#view1">text</a> 
         </li> 
         <li><a href="#view2">text</a> 
         </li> 
        </ul> 
        <div class="tabcontents"> 
         <div id="view1" style="min-height:200px;">text</div> 
         <div id="view2" style="min-height:200px;">text</div> 
        </div> 
        <div class="righties" style="margin-top:40px;margin-bottom:400px;">text</div> 
       </div> 
       <div class="push"></div> 
      </div> 
      <div id="footer">some text</div> 

latest не закрыт, content не закрыт, а wrapper не закрыт. Этот div с style="color:#515151;font-size:14px;" также не закрыт.

Причина, по которой нижний колонтитул волшебным образом находится в содержимом div, потому что он на самом деле! Содержимое div никогда не закрывалось. Вам нужно еще раз взглянуть на вашу разметку.

Answer 2

Это работает для меня, если я удалить весь #content стиль и просто добавить ширину в .wrapper:

.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -80px; 
    width: 980px; 
} 

See it running on JS Fiddle.