27/32 Сетка

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

Подскажите пожалуйста по коду: не понимаю почему у меня Promo - блоки наезжают на меню
Они же все float и равноправные а float на float вроде не должен наезжать!

Испытание: строим сетку
Header
Menu
        <div class="red promo promo1">Promo 1</div>
        <div class="red  promo promo2">Promo 2</div>
    </div>
    <div class="blue">Left</div>
    <div class="blue">Main</div>
    <div class="blue">Right</div>
    <div class="gray">Footer</div>
</body>

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

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}

.top
{
padding:5px 0;
}
.header
{
width: 350px;
height: 35px;
margin-left:45px;
border:5px solid #34495e;
float:left;

}
.clearfix:after
{
content: “”;
display: block;
clear: both;
}
.menu
{
margin-top: 5px;
float:left;
width: 100%;
height: 0;
}

.promo{
float: left;
margin-right:10px;
width:170px;
height: 60px;

}

.promo1{
margin-left:50px;

}
.red
{
background-color:#c0392b;
}
.blue
{
background-color:#3498DB;
}
.gray
{
background-color:#34495e;
}
/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/

2

3

Начало кода не вижу. В данном случае оно мне нужно. Скорее всего распорки не хватает.
Не надо флоат писать каждому блоку. Только для двух колонок .promo и трех колонок .left, .right, .main.