CSS - 2 Column Layout

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

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 2

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 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;
}