Не получается слово футер поставить на место

Курсы §15. Сетки
1

Подскажите, как быть с футером. Не получается слово на место поставить.

исп сетки.png1366×768 133 KB

html, body{
margin:0;
padding:0;
}
body{
width:450px;
height:335px;
font-family:‘Arial’, sans-serif;
font-size:10px;
color:white;
}

/*
Используемые цвета:
#34495e - мокрый асфальт
#c0392b - красный
#3498DB - синий
*/

.layout-positioner {
content:’’;
clear:both;
display:table;
}

.header {
background: #34495e;
color:white;
min-height:170px;

}

.header .layout-column {
margin-top:10px;
}

.header .layout-column1 {
background: #c0392b;
min-height:30px;
width:345px;
margin-left:50px;
padding-top:5px;
padding-left:5px;
}

.header .layout-column2 {
background: #3498DB;
min-height:30px;
width:400px;
padding-left:55px;
padding-top:5px;
}

.header .layout-column3 {
background: #c0392b;
min-height:55px;
width:165px;
margin-left:50px;
float:left;
padding-top:5px;
padding-left:5px;
}

.header .layout-column4 {
background: #c0392b;
min-height:55px;
width:165px;
margin-left:10px;
float:left;
padding-top:5px;
padding-left:5px;
}

.features .layout-column {
background: #3498DB;
min-height: 105px;
margin-top:10px;
margin-left:50px;
float:left;
padding-top:5px;
padding-left:5px;
}

.features .layout-column1{
width: 65px;
}

.features .layout-column2{
width: 185px;
margin-left:10px;
}

.features .layout-column3{
width: 65px;
margin-left:10px;
}

.footer{
min-height:30px;
background:#34495e;
color:white;
margin-top:10px;
padding-left:25px;
}

2

Внутренний отступ слева и сверху поправить. Точнее смогу сказать, если отправите HTML-код.

3

В том то и дело, что с отступами я экспериментировала, насколько фантазии хватило. Вероятнее всего просто чего-то в упор не вижу.

Испытание: строим сетку 
    <div class="header">
        <div class="layout-positioner">
            <div class="layout-column layout-column1">Header</div>
            <div class="layout-column layout-column2">Menu</div>
            <div class="layout-column layout-column3">Promo 1</div>
            <div class="layout-column layout-column4">Promo 2</div>
        </div>
     </div>   
     
    <div class="features">
        <div class="layout-positioner">
            <div class="layout-column layout-column1">Left</div>
            <div class="layout-column layout-column2">Main</div>
            <div class="layout-column layout-column3">Right</div>    
        </div>   
    </div>      
      
     <div class="footer">
        <div class="layout-positioner">
            <div class="footer">Footer</div>
        </div>
    </div>
    
</body>
4

Когда обнуляю верхний внутренний отступ, чтобы потом его подогнать, ничего не меняется.

5

Дело в этой вашей конструкции:
<div class="footer">
<div class="layout-positioner">
<div class="footer">Footer</div>
</div>
</div>
У вас блоки с одинаковым классом вложены друг в друга. Если у внутреннего убрать класс вообще, то можно поправить отступы. Попробуйте.

1 лайк
6

Спасибо, все получилось)

1 лайк