Ron Brouwers Ron Brouwers - 5 months ago 18
CSS Question

CSS - 2 Column Layout

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

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>