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