Layout 2 columns 80/20

index.html

<div class="column c80">
  <header>Header c80</header>
  <section>This column is 80% width and has a header and footer.</section>
  <footer>Footer c80</footer>
</div>
<div class="column c20">
  <header>Header c20</header>
  <section>This column is 20% width and also has a header and footer.</section>
  <footer>Footer c20</footer>
</div>

layout-2-columns-80-20.markdown

Layout 2 columns 80/20

A Pen by Fjodor van Slooten on CodePen.

License.

style.css

* { margin:0; padding:0; border:0; }

html, body {
	height: 100%; /* needed to be able to use 100% height in the columns */
	overflow: hidden;
}

body {
   font-family: Helvetica, Arial, sans-serif;
   font-weight: 300;
}

.column {
  height: 100%;
  float: left;
	box-sizing: border-box;
}

.c20 {
	width: 20%;
	background-color: yellow;
}

.c80 {
	width: 80%;
	background-color: red;
}

header {
  height:20%;
}

section {
  height: 70%;
  padding: 10px;
}

footer {
  height:10%;
}

header, footer {
  background-color: rgba(200,200,200,0.5);
}