Issues with positioning divs

Question

I am trying to have a nice fluid 2 column layout (link below). I'm having a couple of issues!

http://jsfiddle.net/En3h8/3/

1) I want my tab-wrapper to extend the entire height of the page at all times (not sure why it's not working)

2) I want my "main" div to fit snug against the tab wrapper and also extend the entire height of the page, but also fill the rest of the space to the right.

Any help would be greatly appreciated. I'm sure it's something silly that I have missed.

CSS

  body{
    font-family: Calibri, sans-serif;
    top:0px;
    left:0px;
    margin:0px;
    padding:0px;
  }
  #page{
    position: relative;
    width:100%;
    height:100%;          
  }
  .tab{
    min-height:75px;
    padding:5px;
    border-bottom: 1px solid #2a2a2a;
    text-align: center;
    color: #717171;
    cursor: pointer;
    line-height:75px;
  }
  .no-icon{
    line-height: 75px;
  }
  .active{
    background-color: #3c3c3c;
    color: #ffffff;
  }
  #tab-wrapper{
    display:inline-block;
    height:100%;
    width:10%;
    border: 1px solid black;
    float: left;
    background-color: #464646;

  }
  #main{
    display:inline-block;
    width:80%;
    height:100%;
    background-color: #dbdbdb;
    padding:30px 20px;

  }
  #footer{
    clear:both;
    width:100%;
    border:1px solid black;
  }

HTML

<div id="page">
  <div id="tab-wrapper">
    <div id="tab1" class="tab active">
      Tab 1
    </div>
    <div id="tab2" class="tab">
      Tab 2
    </div>
    <div id="tab3" class="tab">
      Tab 3
    </div>
  </div>
  <div id="main">
   Lorem ipsum etc
  </div>
</div>

Answer 1

First to make element 100% height you have to apply 100% to body and html.

I think you might achieve what you need with positioning. I've done something similar to one project and it works in every single browser. I've done this very quick but it should give you the idea:

Demo here: http://jsfiddle.net/c4Tn7/

HTML

<div id="tab_wrapper">
    <a class="tab">Tab 1</a>
    <a class="tab">Tab 2</a>
    <a class="tab">Tab 3</a>
</div>

<div id="content">
    Mauris pharetra malesuada tempus. Sed faucibus commodo nisi, malesuada sodales sem aliquam vitae. Fusce laoreet elementum mattis. Aliquam vulputate ligula vitae velit condimentum sed suscipit ligula gravida. Sed ullamcorper, mi sed sollicitudin pulvinar, metus enim accumsan nisl, sit amet gravida ante dolor eu mauris. Phasellus in nulla massa, sed porttitor neque. Ut ut ligula vitae ipsum lacinia accumsan et nec elit. Pellentesque congue rutrum hendrerit. Donec sed dolor in ante dignissim tempus. Aliquam vestibulum, mauris sed pulvinar eleifend, eros ipsum vehicula mauris, at pulvinar ligula mi ut magna. Integer et augue et enim semper pharetra. Phasellus et ante diam. Quisque condimentum ultricies quam et auctor. Vivamus dignissim nunc ac augue pretium ac porta nisl iaculis.
</div>

<div id="footer">
    THIS IS FOOTER
</div>

CSS

body,html{
    width: 100%;
    height: 100%;
}
body {
    position: relative;
}
#tab_wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 40px;
    width: 100px;
    background: #000;
}
#tab_wrapper .tab{
    display: block;
        min-height:75px;
        padding:5px;
        border-bottom: 1px solid #2a2a2a;
        text-align: center;
        color: #717171;
        cursor: pointer;
        line-height:75px;
}
#content {
    position: absolute;
    top: 0px;
    left: 100px;
    right: 0px;
    bottom: 40px;
    background: #666;
    padding: 20px;
    overflow: auto;
}
#footer {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 40px;
    background: red;
}

Answer 2

There's the theoretical answer to this question, and there's the practical one.

The theoretical one mentions attributes and their semantics.

The practical one acknowledges the fact that many browsers don't care too much about standard behavior, especially when it comes to good, fluid layouts, and you have to maintain lots of specializations per browser.

That's the reason many people choose to use what are called "CSS frameworks", and use their Grid components for fixing a layout. The creators/maintainers of these frameworks have the responsibility of making them compliant with many browsers, and as elegant as possible within this constraint.

Have a look at Twitter Bootstrap or 960.gs for more info.

Obviously, if you want to know how it's done, you can have a look at their source code. Specifically, 960.gs uses fixed margins, paddings and floating divs.

Another good thing about these frameworks is that they tend to work well across platforms. That is Linux/Mac/Android/iOs/Windows etc.