Block Formating Context

by Trae

HTML

<aside role="complementary">
    Left column
  </aside>
  <div class="sidebar">
    Right column
  </div>
  <main role="main">
    This is the main content area. And it's stretchy!
  </main>

CSS

aside {
  float: left;
  background: #ccc;
  width: 150px;
  margin-right: 10px;
  height: 400px;
}

.sidebar {
  float: right;
  width: 100px;
  margin-left: 10px;
  height: 400px;
  background: #ddd;
}

main {
  display: table-cell;
  width: 10000px;
  vertical-align: top;
  height: 400px;
  background: yellow;
}