2 column layout, first column fixed width, 100% height, 2nd column 100% width and height

Question

I've managed to accomplish this with display:table-cell but I've run into a problem, implementing masonry.js into a table-cell, it just doesn't work.

So I have to do this with normal divs.

I need the left column to be 40px wide, and a height that grows with the content. The main column needs to be 100% width or dynamically take up the remaining space.

Rigth now I have this, which works structurally but not with masonry.js.
CSS

div#wrapper{
display:table; 
height:100%; 
width:100%;
}
div#sidebarWrapper{
display:table-cell; 
min-width:40px; 
height:100%; 
background-color:#444;
}
div#contentWrapper{
display:table-cell; 
height:100%; 
position:relative;
}
div#content{
border-left:1px solid #ddd; 
border-top:1px solid #ddd; 
overflow:hidden; 
padding-bottom:100px; 
margin-top:195px;
}
div.clear{clear:both;} 

HTML

  <div id="wrapper">
        <div id="sidebarWrapper">
          </div> <!-- sidebar wrapper -->

          <div id="contentWrapper">
            <div id="content">
            </div><!-- content-->
            <div class="clear"></div>
          </div><!-- wrapper wrapper -->
      </div><!-- site wrapper -->

Basically I need version of this which works without tables. Help much appreciated.

Answer 1

I assume that you need second column to be fluid so..

Demo (Made another demo, overflow: hidden; was not required on child element)

I guess you won't need any explanation here as everything is self explanatory, removed overflow: hidden; from the child element which was not required in your case.

<div class="wrapper">
    <div class="left_container">Hello</div>
     <div class="right_container">World this is just a random junk text</div>
</div>

html, body {
    height: 100%;
}

.wrapper {
   height: 100%;
}

.left_container {
    float: left;
    width: 200px;
    background: #f00;
    min-height: 100%;
}

.right_container {
    min-height: 100%;
    background: #000;
    margin-left: 200px;
    color: #f00;
}

Note: This won't expand the left column if the right one exceeds the viewport height, in this case we generally use display: table; for a pure CSS solution but you already ruled that out on first place so you can opt for jQuery.. Or you can use overflow-y: auto; on the container which you think might exceed the viewport height.

$(function(){
    $(window).resize(function(){
        var documentHeight = $(document).height();
        $('.left_container').css('height',documentHeight + 'px');
    }).resize();    
});

Demo 2 (With content)

Edit: Mr.Alien had the right idea I just made a little tweak :)

jQuery(function($){
    $(window).resize(function(){
        var containerHeight = $('.right_container').height();
        $('.left_container').css('height',containerHeight + 'px');
    }).resize();    
});