Задание выполнил полностью, но прошу помочь разобраться в возникших по ходу выполнения вопросах.
Первое - блок header внутри блока top прилипал к его верхнему краю, пока я не додумался явно задать для top верхнюю границу. Причем попытка отодвинуть его вниз марджином приводила к перемещению вниз обеих слипшихся по верхней границе top и header. Только задание верхней границы для top заставило работать margin для header адекватно.
Второе - если для какого-либо блока, неважно, флоатного или нет, ( к примеру menu ) была явно задана высота, то добавление для него верхнего паддинга ( чтобы отодвинуть надпись вниз) увеличивало высоту блока ровно на величину этого паддинга.
Помогите разобраться в причинах этих явлений. Понимаю, что это где-то из прошлого материала, но хоть убей вспомнить и найти не смог. Заранее благодарю! 
<div class="top">
<div class="header">Header</div>
<div class="menu">Menu</div>
<div class="position-top">
<div class="promo promo1">Promo 1</div>
<div class="promo promo2">Promo 2</div>
</div>
</div>
<div class="column">
<div class="c c1">Left</div>
<div class="c c2">Main</div>
<div class="c c3">Right</div>
</div>
<div class="footer">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 {
height: 165px;
background: #34495e;
border-top: 5px solid #34495e;
}
.header {
height: 30px;
background: #c0392b;
margin: 5px 50px;
padding-left: 5px;
padding-top: 5px;
}
.menu {
height: 30px;
background: #3498DB;
margin-top: 10px;
padding-top: 5px;
padding-left: 55px;
}
.position-top {
margin: 10px 50px;
}
.promo1 {
float: left
}
.promo2 {
float: right;
}
.promo {
background: #c0392b;
width: 165px;
height: 55px;
padding-top: 5px;
padding-left: 5px;
}
.column {
margin: 10px 50px;
}
.c {
background: #3498DB;
float: left;
height: 105px;
padding-top: 5px;
padding-left: 5px;
margin-bottom: 10px;
}
.c1, .c3 {
width: 65px;
}
.c2 {
width: 185px;
}
.c1, .c2 {
margin-right: 10px;
}
.footer {
clear: both;
height: 30px;
background: #34495e;
padding-top: 5px;
padding-left: 55px;
}
/*
Используемые цвета:
#e34495 – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/
