clearfix selector

by pleinx

HTML

<div class="page cls">
  <div class="main">
    Main
  </div>
  <div class="sidebar">
    Sidebar
  </div>
</div>

CSS

.cls:after {
  content: " ";
  display: block;
  clear: both;
}

.page {
  background: red;
  width: 600px;
}

.main, .sidebar {
  float: left;
}

.main {
  width: 500px;
  height: 500px;
  background: lightgrey;
}

.sidebar {
  width: 100px;
  height: 350px;
  background: lightblue;
}