CSS: Липкий нижний колонтитул и div внутри нижнего колонтитула. Плыть налево

Question

Возможно, это проблема липкого нижнего колонтитула, а может и нет. Не совсем уверен. Я хочу, чтобы элементы div внутри моего нижнего колонтитула располагались рядом друг с другом, используя float:left, но они, похоже, накладываются друг на друга, и я не уверен, почему.

HTML:

 <div id="footer_container">
 <div id="footer_content">
 </div>
 <div id="footer_content">
 </div>..etc

CSS:

#footer_content {
font-size:18px;
    float:left;
padding:0 35px; 
color:#EEEEEE;
text-align:left;
    height:150px;
    width:150px;
}

Плюс все обычные липкие колонтитулы:

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
#footer, .push {
height: 175px;
}
#footer_content a{
   color:#989393;
}
#footer_container{
   width:1100px;
   height:175px;
}

Answer 1

Вам нужно изменить footer_content на класс вместо id.

Answer 2

Вы не можете дублировать свой элемент id.Элемент id должен быть уникальным, но вы используете id=footer_content более одного раза.Браузеры склонны игнорировать последующие элементы с одинаковыми id.

Измените их все на классы.

 <div class="footer_content">
 </div>

 <div class="footer_content">
 </div>

и

.footer_content {
    font-size:18px;
    float:left;
    padding:0 35px; 
    color:#EEEEEE;
    text-align:left;
    height:150px;
    width:150px;
}

Демонстрация с использованием вашего кода толькочто один идентификатор превратился в класс ...

http://jsfiddle.net/DRfuH/

Кажется, что работает, поскольку они теперь рядом друг с другом.