2 Column Full Height

by bgrins

HTML

<script src="https://raw.github.com/bgrins/loremjs/master/lorem.js"></script>
<div class="fill">
    <div id="shadow" class="container"></div>
    
    <div id="bg" class="fill container">
        <div class="sidebar fill"></div>
        <div class="main fill"></div>
    </div>
</div>

<div id="page" class="container">
    <div id="sidebar">
        <div class='content' data-lorem='1s'></div>
    </div>
                        
    <div id="main">   
        <div id="main2">
        <div style='clear:left;'></div>
        <div class='content' data-lorem='2s'></div>
        <div style='clear:left;'></div>
        </div>
    </div>
</div>

<div id="footer">
    Yo
</div>

CSS

html {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100%;
    position: relative;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    height: 100%;
    margin: 0 auto;
}

.fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: 100%;
}

#shadow {
  border: 10px solid #ddd;
  border-top: none;
  border-bottom: none;
  box-shadow: 0 10px 20px #aaa;
}

.sidebar {
    content: "";
    display:block;
    position:absolute;   
    top: 0;
    bottom: 0;
    height: 100%;
    background: #333;
    width: 181px;
    z-index:-1;
    border-right: solid 10px red;
}
.main {
       
    top: 0;
    bottom: 0;
    height: 100%;
    background: orange;
    z-index: -2;
}

.content {
    padding: 20px;
}
.content:hover {
    outline: dashed 2px orange;
}

#sidebar{
    float:left;
    background: #333;
    width: 181px;
    color: #EEE;
}

#page {
    /*height:100%;
    position:relative;*/
    border-bottom: solid 10px red;
}
#main {
    margin-left: 200px;
}
#main2 {
 float:left;
}


#footer {
 background: #222;
height: 40px;
}

.container:before, .container:after { content: ""; display: table; }
.container:after { clear: both; }
.container { *zoom: 1; }