written by Shannon Lynd on Friday, April 26, 2013
Every once in a while, something that should be so simple in CSS just isn't. Columns are not easy. Here's a simple solution for a two column layout expanding to the full height of the browser.
The HTML
<div class="container">
<div class="col_left">First Column</div>
<div class="col_right">Second Column</div>
<div class="col_left">First Column</div>
<div class="col_right">Second Column</div>
</div>
The CSS
.container {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
background-color:blue;
}
.column_wrap {position:relative;}
.col_left {
background-color:green;
width:417px;
position:absolute;
left:0;top:0;
bottom:0;
height:auto;
display: block;
}
.col_right {
margin-left:417px;
}
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
background-color:blue;
}
.column_wrap {position:relative;}
.col_left {
background-color:green;
width:417px;
position:absolute;
left:0;top:0;
bottom:0;
height:auto;
display: block;
}
.col_right {
margin-left:417px;
}