I'm trying to create a page where the header is 100% wide and takes up 20% of height in a screen with the left navbar (20% width) and a main body adjacent (80% width). I'm trying also to make the page fluid so it maintains it's ratio on different sized screens.

```
html

<!doctype html>
<html lang="en">
<head>
    <title>Test</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="header">

  </div>

  <div class="left">

  </div>

  <div class="main">

  </div>

</body>

</html>

```

css (with fixed properties commented out)

```
#header{
    height:20%;
    width:100%;
    background-color: #3B3738;
    /*min-height:80px;
    min-width: 100%;*/
}

#left{
    height:80%;
    width:20%;
    background-color: #848484;
    /*min-height:550px;
    min-width:20%;
    position: relative;
    float:left;*/
}

#main{
    height:80%;
    width:80%;
    background-color: #FDF3E7; 
    /*min-height:550px;
    min-width:80%;
    position: relative;
    float:left;*/
}

```

How can I make it so the layout is responsive?