CSS - 2 Column Layout - html

Question

I want to create a 2 column liquid layout with a nav bar on the left side that should have a height of 100%, a header that should have a width of 100% and a content section that should have a height and width of 100% as well, and there should be a margin on all sides of 10 or 20 pixels, and also in between the header, nav and content boxes. Here is my fiddle:
https://jsfiddle.net/d2Lnq6sd/1/
header {
position: relative;
height: 75px;
width: 100%;
background-color: red;
border: 1px solid black;
}
nav {
position: relative;
top: 20px;
left: 0px;
height: 100%;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
}
section {
position: absolute;
top: 110px;
left: 240px;
width: 100%;
background-color: green;
border: 1px solid black;
}
Now as you can see the nav bar is not 100% in height and the content section is too wide. My final result should look like this:
http://imageshack.com/a/img921/9425/UYp8Ah.png
Tried finding help on google on this issue but I still don't get what I should use, relative or absolute positions and which to use for which attribute. any pointers?

Answer 1

You're good to go: http://codepen.io/8odoros/pen/vKxVYv?editors=1100
nav bar is 100% in height
the content section is not too
wide
html, body {
height:calc(100% - 60px);
}
body {
font-family: verdana;
color: #fff;
}
.container {
position: relative;
margin: 10px;
padding: 10px;
height:100%;
box-sizing:border-box;
}
header {
float:left;
height: 75px;
width: 100%;
background-color: red;
border: 1px solid black;
box-sizing:border-box;
}
nav {
float:left;
margin-top:20px;
height: 100%;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
box-sizing:border-box;
}
section {
float:right;
margin-top:20px;
height:100%;
padding: 10px;
width:calc(100% - 220px);
background-color: green;
border: 1px solid black;
box-sizing:border-box;
}
<div class="container">
<header>
This is the header
</header>
<nav>
This is the nav
</nav>
<section>
This is the main section
</section>
</div>

Answer 2

Try this code and see demo:
CSS:
body {
color: #fff;
font-family: verdana;
}
header {
background-color: red;
border: 1px solid black;
height: 75px;
width: 100%;
}
nav {
background-color: blue;
border: 1px solid black;
float: left;
margin: 2% 0;
min-height: 300px;
padding: 10px;
width: 20%;
height: 100%;
}
section {
background-color: green;
border: 1px solid black;
float: right;
position: absolute;
right: 10px;
top: 100px;
width: 75%;
}
See Fiddle Demo

Answer 3

Alright so I changed a few things:
https://jsfiddle.net/d2Lnq6sd/9/
body,html {
height:100%;
}
body {
font-family: verdana;
color: #fff;
}
.container {
position: relative;
margin: 10px;
padding: 10px;
width: 73%;
float: left;
height:auto;
}
header {
position: relative;
height: 75px;
width: 100%;
background-color: red;
border: 1px solid black;
}
aside {
float:left;
width:20%;
margin-top:15px;
margin-left:5px;
height: 100%;
background-color: blue;
border: 1px solid black;
}
section {
width: 100%;
background-color: green;
border: 1px solid black;
}
I have moved your navigation into an aside tag, this is just HTML 5 syntax Link
By using floats and keeping the positions as they were you are able to create the desired effect. To get the width to 100% I would recommend playing with the padding and margins to get it to a 20% + 80% ratio.
Hope this helps :)

Answer 4

Do you need like this ,
Html:
<div class="container">
<header>
This is the header
</header>
<nav>
This is the nav
</nav>
<section>
This is the main section
</section>
</div>
Css:
body {
font-family: verdana;
color: #fff;
}
.container {
position: relative;
margin: 10px;
padding: 10px;
}
header {
position: relative;
height: 75px;
width:675px;
background-color: red;
border: 1px solid black;
}
nav {
position: relative;
top: 20px;
left: 0px;
height: 300px;
bottom:200px;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
}
section {
position: absolute;
top: 110px;
left: 240px;
width: 100%;
background-color: green;
border: 1px solid black;
}
you can see the link:https://jsfiddle.net/d2Lnq6sd/11/

Answer 5

You can position nav as fixed, use below to get an idea.
nav {
position: fixed;
top: 20px;
left: 0px;
height: 100%;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
margin-top: 76px;
}