CSS layout design

Question

I want to create this CSS layout.

The div structure is this:

<div class="header"></div>
<div class="content">
  <div class="left"></div>
  <div class="right"></div>
</div>

Can anyone help me to create the css classes needed?.

Edit1: Header + Main content should fill screen height.

Answer 1

.header {
  background-color:brown;
  height:10vh;
}
.content {
  height:90vh;
}
.left {
  width:25%;
  height:100%;
  background-color:#AAAAFF;
  float: left;
  overflow: scroll;
}
.right {
  width:75%;
  height:100%;
  background-color:#FFAAAA;
  float: right;
  overflow: hidden;
}

<div class="header"><p> HELLO I AM A HEADER </p></div>
<div class="content">
  <div class="left"><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p></div>
  <div class="right"><p> SOME MAIN CONTENT IN HERE! </p></div>
</div>

Run this code snippet to see an example, here is a very basic layout to get you started.

Edit: setting a height of 100vh will create a div that equals the size of your screen. You can read up on it here: Make div 100% height of browser window

Answer 2

Here's an alternate approach:

http://jsfiddle.net/austinthedeveloper/kk3ywj2x/

The secret is to use calc instead of vh. Just make sure that you know that this only supports IE 10 and up.:

.header {
    height: 120px;
}
.content {
    height: calc(100% - 120px);
}

This allows for a fixed height on things like the header and footer. This approach works great when paired with SASS since the heights would be variables that can be changed easily.

Areas that overflow will need to have this attached:

.right {
    overflow-y: auto;
}

You can change this to scroll if you always want the scrollbar there.