3-column layout (fixed-fluid-fixed) with full-screen height - html

Question

I'm trying to achieve a 3-column fixed-fluid-fixed layout. Also, the height of the layout must take up the whole screen so that it looks like 3 solid columns going from top-to-bottom.
Summary:
Left-column: fixed-width
Center-column: resizeable-width
Right-column: fixed-width
- The height for all 3 columns takes up entire screen.
- All 3 columns are always equal length.
My problem is getting the last part to work. I can not get all 3 columns to be equal height.
Here is my HTML/CSS:
<style type="text/css">
.parent {
margin-bottom:20px;
position:relative;
background-color: green;
}
.main {
margin-left:20%;
background:#ddd;
padding: 10px;
height: 100%;
}
.side {
position:absolute;
width:20%;
top:0;
bottom:0;
background-color: green;
}
.left {
left:0;
background-color: red;
}
.right {
right:0;
background-color: blue;
}
</style>
<div class="parent">
<div class="side left">
Sub Content
</div>
<div class="main">
Main Content<br>
<img src="" width="200" height="600">
</div>
<div class="side right">
Sub Content
</div>
</div>

Answer 1

Is this what you need? http://jsfiddle.net/3MfBa/
HTML:
<div class="side left">
Sub Content
</div>
<div class="main">
Main Content<br>
<img src="" width="200" height="600">
</div>
<div class="side right">
Sub Content
</div>
CSS:
.main {
position: absolute;
top:0;
bottom:0;
left:20%;
right:20%;
background:#ddd;
padding: 10px;
overflow: auto;
}
.side {
position:absolute;
width:20%;
top:0;
bottom:0;
background-color: green;
}
.left {
left:0;
background-color: red;
}
.right {
right:0;
background-color: blue;
}
Alternative CSS (http://jsfiddle.net/DgPRZ/):
body { margin:0; padding:0;}
.main {
margin-left:20%;
margin-right:20%;
background:#ddd;
padding: 10px;
}
.side {
position:fixed;
width:20%;
top:0;
bottom:0;
background-color: green;
}
.left {
left:0;
background-color: red;
}
.right {
right:0;
background-color: blue;
}
ALT VERSION 2 (http://jsfiddle.net/B4X4p/2/):
HTML:
<div class="container">
<div class="col side left">
Sub Content
</div>
<div class="col main">
<div class="main-content">
Main Content<br>
</div>
</div>
<div class="col side right">
Sub Content
</div>
</div>
CSS:
html, body { margin:0; padding:0; height:100%;}
.container, .container > div.col {
display: flex;
flex: 1 0 auto;
}
.container {
width:100%;
min-height:100%;
}
.main {
width: 60%;
background:#ddd;
float:left;
}
.main-content {
padding: 10px;
}
.side {
width:20%;
background-color: green;
min-height:100%;
float:left;
}
.left {
background-color: red;
}
.right {
background-color: blue;
}

Answer 2

To maintain column width you've to use either bootstrap or any framework or custom CSS that I've written below. It can be done with jquery as per your scenario.
.left-column,.right-column,.center-column{width:25%;display:inline-block;height:100vh;}
.center-column{width:50% !important;}
This will make side columns 25% and center one 50%; vh stands for viewport height. It will give you full height based on your viewport without any positioning hack.
T0 make only center part resizable. I guess you need jquery.

Answer 3

I recommend using Bootstrap it's easy to use and implement.
With Bootstrap you could have something like this:
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4></div>
<div class="col-lg-4 col-md-4 col-sm-4></div>
<div class="col-lg-4 col-md-4 col-sm-4></div>
</div>
And this would do the trick. Bootstrap uses a grid layout system and it is responsive. Read more at getbootstrap.com