Сетки / Испытание: строим сетку [27/32] проблема с кодом

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

Помогите пожалуйста! Правый блок с наполнением “right” не перемещается в одну строку с блоками с наполнением “left” и “main”.
HTML :

<!DOCTYPE html>
<html lang="ru">
<head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
</head>
<body>
    <div class="head">
      <div class="header">Header</div>
      <div class="menu">Menu</div>
      <div class="promo promo_1">Promo 1</div>
      <div class="promo promo_2">Promo 2</div>
    </div>
    <div class="clearfix">
       <div class="left b">Left</div>
       <div class="main b">Main</div>
       <div class="right b">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;
}

.head {
background-color:#34495e;
height:150px;
padding-top:10px;
padding-bottom:10px;
margin-bottom: 10px;
}

.header {
clear:both;
background-color:#c0392b;
width:340px;
margin:auto;
height:25px;
padding:5px;
margin-bottom:10px;
}

.menu {
background-color:#3498DB;
width:auto;
height:25px;
padding:5px;
padding-left:50px;
margin-bottom:10px;
}

.promo {
background-color:#c0392b;
width:160px;
height:50px;
padding:5px;
}

.promo_1 {
float:left;
margin-left:50px;
}

.promo_2 {
float:right;
margin-right:50px;
}

.clearfix {
width:350px;
}

.b {
background-color:#3498DB;
margin-bottom:10px;
}

.left {
width:70px;
height:105px;
margin-left:50px;
margin-right:10px;
float: left;

}

.main {
width:170px;
height:105px;
margin-left:130px;
clear:none;
}

.right {
height:105px;
width:65px;
float:right;
margin-right: 50px;

}

.footer {
background-color:#34495e;
width:auto;
height:25px;
padding:5px;
padding-left:50px;
}
2

у вас main идет без флоата, поэтому идущий ниже по коду right будет сдвигаться в сторону в рамках своей строки и “вверх” не поднимется.

3

и следующий момент: флоатнутые элементы будут располагаться в одну строку только в том случае, если они туда влазят - т.е. если их суммарная ширина ( с учетом их паддингов-маргинов) будет меньше или равна ширине родителя

4

Спасибо!

5

Ну это само собой)