Помогите разобраться: блок header, menu, promo1 и promo2 поместил в контейнер. Только если у контейнера есть border, то Margin отодвигает header от границы контейнера сверху, а promo1 и promo2 от низа вверх. Если границы нет, то дочерние блоки прилипают к границе родителя.
.mainHeader{
background-color:#34495e;
border: 1px dashed transparent;
}
.header {
box-sizing:border-box;
padding-top: 5px;
padding-left: 5px;
height:40px;
width: 350px;
background:#c0392b;
margin: 10px auto;
}
.menu{
box-sizing:border-box;
min-height:30px;
background:#3498DB;
}
.layout-positioner{
box-sizing:border-box;
padding-top: 5px;
padding-left: 5px;
height:40px;
width: 350px;
margin: 10px auto;
}
.columns-container {
box-sizing:border-box;
height:60px;
width: 350px;
margin: 10px auto;
}
.promo1 {
box-sizing:border-box;
padding-top: 5px;
padding-left: 5px;
width: 170px;
float:left;
margin: 0px auto;
min-height:60px;
background:#c0392b;
}
.promo2 {
box-sizing:border-box;
padding-top: 5px;
padding-left: 5px;
width: 170px;
float:right;
margin: 0px auto;
min-height:60px;
background:#c0392b;
}
.columns-container1 {
box-sizing:border-box;
height:100px;
margin: 0px auto;
background: white;
}
.column-Left {
box-sizing:border-box;
margin-right: 10px;
padding-top: 5px;
padding-left: 5px;
width: 70px;
height: 100px;
float:left;
background:#3498DB;
}
.column-main {
box-sizing:border-box;
margin-right: 10px;
padding-top: 5px;
padding-left: 5px;
width: 190px;
height: 100px;
float:left;
background:#3498DB;
}
.column-right {
box-sizing:border-box;
margin: 0px 0px;
padding-top: 5px;
padding-left: 5px;
width: 70px;
height: 100px;
float:right;
background:#3498DB;
}
.footer {
background:#34495e;
}