27/32 100% Как можно оптимизировать

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

html
html.JPG640×679 40.1 KB

CSS:

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

body {
width: 450px;
height: 335px;

font-size: 10px;
font-family: “Arial”, sans-serif;
color: white;
}
.clearfix::after {
content: “”;
display: table;
clear: both;
}
/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498db – синий
*/
.header {
background-color: #34495e;
padding: 10px 0;
}
.container {
width: 350px;
margin: 0 auto;
}
.head {
background-color: #c0392b;
padding: 5px;
height: 25px;
margin-bottom: 10px;
}
.wrap-menu {
background-color: #3498db;
}
.menu {
padding: 5px;
height: 25px;
margin-bottom: 10px;
}
.promo {
background-color: #c0392b;
width: 160px;
padding: 5px;
height: 50px;
}
.promo1 {
float: left;
}
.promo2 {
float: right;
}
.main {
padding: 10px 0;
}
.left {
background-color: #3498db;
width: 60px;
float: left;
padding: 5px;
height: 100px;
margin-right: 10px;
}
.right {
background-color: #3498db;
width: 60px;
float: right;
padding: 5px;
height: 100px;
}
.central {
background-color: #3498db;
width: 180px;
float: left;
padding: 5px;
height: 100px;
margin-right: 10px;
}
.footer {
background-color: #34495e;
}
p {
margin: 0;
padding: 5px;
height: 25px;
}

2 
 <body>
<header>
  <div class="container">
    <div class="header-top">
    Header
    </div>
</div>
<nav>
  <div class="container">
Menu
  </div>
</nav>
<div class="container clearfix">
  <div class="promo">
Promo 1
</div>
<div class="promo">
Promo 2
</div>
</div>
</header>
<main class="container clearfix">
  <section class="left">
Left
</section>
<section class="main">
Main
</section>
<section class="right">
Right
</section>
 </main>
<footer>
  <div class="container">
Footer
</div>
</footer>
  </body>
</html>

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

body {
  width: 450px;
  height: 335px;

  font-size: 10px;
  font-family: "Arial", sans-serif;
  color: white;
}

header, footer {
  background: #34495e;
}

.container {
  width: 350px;
  margin: 0 auto;
  padding: 10px 0;
}

nav {
  background: #3498db;
  min-height: 35px;
}

nav .container, footer .container {
  padding: 5px;
  padding-left: 15px;
}

.header-top {
  background: #c0392b;
  padding: 5px;
  min-height: 25px;
}

.promo {
  background: #c0392b;
  min-height: 50px;
  padding: 5px;
  width: 160px;
  float: left;
  margin-right: 10px;
}

.promo:last-child {
  margin:0;
}

.clearfix::after {
  clear:both;
  content: "";
  display: table;
}

section {
  float: left;
  background: #3498db;
  margin-right: 10px;
  padding: 5px;
  min-height: 100px;
}

.right {
  margin: 0;
}

.left,.right {
  width: 60px;
}

.main {
  width: 180px;
}

footer {
  min-height: 40px;
}