Демонстрация трёхколоночного макета с float

by webref

HTML

<header>
  <code>&#60;header&#62;</code>
</header>

<section>
  <code>&#60;section&#62; <br> float: left;</code>
</section>

<section>
  <code>&#60;section&#62; <br> float: left;</code>
</section>

<section>
  <code>&#60;section&#62; <br> float: left;</code>
</section>

<footer>
  <code>&#60;footer&#62;</code>
</footer>

CSS

code {
  background: #2db34a;
  border-radius: 6px;
  color: #fff;
  display: block;
  font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
  padding: 24px 15px;
  text-align: center;
}
header,
section,
aside,
footer {
  margin: 0 1.5% 24px 1.5%;
}
section {
  float: left;
  width: 30%;
}
footer {
  clear: both;
  margin-bottom: 0;
}