Товарищи спецы, оцените код, вроде 100% но что то не нравится.

Курсы §15. Сетки
1 
<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="container">
            <div class="header box-size">Header</div>
            <div class="menu">Menu</div>
                <div class="promo-position">
                    <div class="promo1 box-size">Promo 1</div>
                    <div class="promo2 box-size">Promo 2</div>
                </div>
        </div>
            <div class="column-position">
                <div class="left box-size">Left</div>
                <div class="main box-size">Main</div>
                <div class="right box-size">Right</div>
            </div>
        <div class="footer">Footer</div>
    </body>
</html>

CSS:

html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 450px;
    height: 335px;
    font-family: "Arial", sans-serif;
    font-size: 10px;
    color: white;
}
* {
    box-sizing: border-box;
    }

.box-size {
    padding: 5px;
    }
    
.container {
    background-color: #34495e;
    min-height: 170px;
    padding-top: 10px
    }
    
.header {
    background-color: #c0392b;
    min-height: 35px;
    width: 350px;
    margin: auto auto;
    }
    
.menu {
    background-color: #3498DB;
    min-height: 35px;
    margin-top: 10px;
    padding: 5px 0px 0px 55px;
    }
    
.promo-position {
    margin: 10px auto;
    width: 350px;
    }
    
.promo1 {
    background-color: #c0392b;
    min-height: 60px;
    width: 170px;
    float: left;
    }
    
.promo2 {
    background-color: #c0392b;
    min-height: 60px;
    width: 170px;
    float: right;
    }
 
.column-position {
    margin: auto;
    width: 350px;  
    }

.left,
.main,
.right {
    background-color: #3498DB;
    min-height: 110px;
    margin-right: 10px;
    float: left;
    margin-bottom: 10px;
    }
    
.main {
    width: 190px;
    float: left;
}

.left,
.right{
    width: 70px;
    }
    
.right {
    margin-right: 0px;
    }

.footer {
    height: 35px;
    background-color: #34495e;
    clear: both;
    padding: 5px 0px 0px 55px;
    }

Почему не пришлось использовать класс псевдораспорки ?

2

потому что для .container вы прописали высоту (но попробуйте увеличить высоту у блоков promo и увидите, как они начнут выпадать), а для .footer прописали свойство clear: both; - и футер самостоятельно отодвинулся от флоатов (но если бы столбцы .left, .main и .right располагались бы на каком-нибудь фоне, этот бы прием уже не сработал, т.к. фон не стал бы растягиваться)

3

выравнивание с помощью auto по вертикале не работает.

4

а вообщем код правильный?

5

и кстати clear в footere не помог… никак не хотел отодвигаться, от блоков, пришлось margin: bottom прописать для
left,
.main,
.right {
background-color: #3498DB;
min-height: 110px;
margin-right: 10px;
float: left;
margin-bottom: 10px;
}
Почему?

6

а вы для проверки уберите это свойство (clear: both;) и посмотрите, как футер “подскочит”

7

Блин не то же хотел написать… Проблема была футер отодвинуть вниз на 10px от колонок пытался футера margin: top не помогает… почему? Я чё то упускаю походу. поэтому и на форум написал

8

потому что футер - обычный блок, без флоат, поэтому его маргин-топ будет отталкивать от ближайшего такого же обычного блока, а ближайший обычный - это у нас .column-position, который имеет нулевую высоту и схлопнут.

для наглядности: задайте для .column-position какую-нибудь цветную рамку снизу, затем уберите из свойств футера clear: both, посмотрите куда он подпрыгнет, а дальше задавайте ему разные margin-top и увидите как он постепенно начнет отодвигаться от нижней границы .column-position