html,
body{
margin:0;
padding:0;
}
body{
width:450px;
height:335px;
font-family:"Arial",sans-serif;
font-size:10px;
color:white;
}
.layout-positioner{
width:350px;
margin:10px auto;
}
.header-container{
padding:10px 0px;
background-color:#34495e
}
.header{
width:340px;
height:25px;
margin-left:auto;
margin-right:auto;
padding:5px;
background-color:#c0392b
}
.menu-container{
width:100%;
height:35px;
background-color:#3498DB
}
.menu{
width:340px;
padding:5px;
max-height:25px;
}
.promo{
width:160px;
height:50px;
padding:5px;
float:left;
background-color:#c0392b
}
.promo:first-child{
margin-right:10px;
}
.clearfix::after{
content:"";
display:table;
clear:both;
}
.side{
height:100px;
width:60px;
padding:5px;
background-color:#3498DB
}
.side:first-child{
float:left;
margin-right:10px;
}
.side:last-child{
float:right;
}
.main{
height:100px;
width:180px;
float:left;
padding:5px;
background-color:#3498DB
}
.main-page-container{
margin-bottom:10px;
}
.footer-container{
width:100%;
height:35px;
background-color:#34495e;
}
.footer{
width:340px;
max-height:25px;
padding:5px;
}
<!DOCTYPE html><html lang="ru">
<head>
<title>Испытание: строим сетку</title>
<meta charset="utf-8">
</head>
<body>
<div class = "header-container clearfix">
<div class = "header">Header</div>
<div class = "menu-container">
<div class = "menu layout-positioner">Menu</div>
</div>
<div class = "layout-positioner">
<div class = "promo">Promo 1</div>
<div class = "promo">Promo 2</div>
</div>
</div>
<div class = "main-page-container layout-positioner clearfix">
<div class = "side">Left</div>
<div class = "main">Main</div>
<div class = "side">Right</div>
</div>
<div class = "footer-container">
<div class = "footer layout-positioner">Footer</div>
</div>
</body>
Работает, если написано в таком виде? Сомневаюсь.
У меня код не хотел добавляться на сайт, поэтому убрал в редакторе все пробелы
В нормальном виде там всё в порядке и работает