Как увеличить высоту нижнего колонтитула при изменении размера окна браузера?

Question

Если ширина браузера равна 1024 - все в порядке, но когда я изменяю его размер до 600 пикселей - фон нижнего колонтитула не расширяется вертикально, а разделы «Нужна помощь» и «Присоединиться к нам», которые ниже, не имеют цвета фона ... Как для увеличения высоты нижнего колонтитула при изменении размера?

В настоящее время это выглядит таким образом (я «выбрать все» на странице, чтобы показать белый текст) actual result http://i42.tinypic.com/dmf8km.png

Но я хочу, высота нижнего колонтитула, чтобы выглядеть следующим образом: desired result http://i41.tinypic.com/2ilhv03.png

Спасибо авансовый.

CSS

.footer { 
    color: white; 
    height: 200px; 
    background-color: #536571; 
    font-size: 18px;    
} 


.about, .contacts, .help, .join { 
    float: left; 
    margin-top: 15px; 
    margin-left: 50px; 
} 

.about { 
    margin-left: 100px; 

} 

.join { 
    max-width: 300px; 

} 

.copyright { 
clear: both; 
float: right; 
margin-right: 20px; 
} 

.footer ul p { 
    font-size: 24px; 
    font-weight: bold; 
} 

.footer ul { 
    list-style: none; 
} 

HTML

<div class="footer">   
    <div class="about"> 
     <ul> 
      <p>About</p>    
      <li>Team</li> 
     </ul> 
    </div> 

    <div class="contacts"> 
     <ul> 
      <p>Contacts</p>   
      <li>info@site.com</li> 
     </ul> 
    </div> 

    <div class="help"> 
     <ul> 
      <p>Need help?</p>   
      <li>FAQ</li> 
     </ul> 
    </div> 

    <div class="join"> 
     <ul> 
      <p>Join us!</p>   
      <li> 
       Subscribe now and get a discount to our premium plan! 
      </li> 
     </ul> 
    </div> 

<div class="copyright">(C) 2013 My Company</div> 

</div> 

Answer 1

Проблема связана с тем, что поплавки не содержатся в нижнем колонтитуле. Попробуйте следующее:

.footer { 
    /* height: 200px; removed to allow the footer to stretch */ 
    overflow: hidden; /* a nice trick to contain floats */ 
} 

http://jsfiddle.net/Hk26d/

Answer 2

Я изменил высоту до минимальной высоты и изменили .copyright дел до

.copyright { 
    clear: both; 
    text-align: right; 
    margin-right: 20px; 
} 

Так что избавиться от поплавка: прямо внутри. авторское право, и это сработало!