Two column layout

by adorek

HTML

<div class="wrapper">
  <div class="header">
    <p>test</p>
  </div>
  <div class="col-left">
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
  </div>
  <div class="col-right">
    <p>test</p>
  </div>
  <div class="footer">
    <p>test</p>
  </div>
</div>

CSS

body {
  height: 100%;
  background-color: #FFF;
}

.wrapper {
  overflow: hidden;
  margin: 0 auto;
  height: 100%;
  width: 1024px;
  background-color: #000000;
}

.header {
  padding: 10px;
  background-color: #33cc33;
  height: 100px;
}

.col-left {
  padding: 10px;
  float: left;
  height: calc(100vh - 174px);
  width: 300px;
  background-color: #ff0066;
}

.col-right {
  padding: 10px;
  float: left;
  height: calc(100vh - 174px);
  width: 684px;
  background-color: #0066ff;
}

.footer {
  padding: 10px;
  background-color: #99ff33;
  height: 50px;
  position: absolute;
  bottom: 0;
  width: 1004px;
}