how to make three column layout like this in css3 - css

Question

So there are 3 columns all with 100% vertical height.
left column has fixed width of 80px.
middle column and right column fill in the available space by ratio of 80% to 20%. So middle takes up 80% space, and right one takes 20% space.
right column width however if is less than 100px that it becomes fixed to 100px. min-width is 100px and max-width is 20% of available space.
I know right now there is no way to refer available vertical or horizontal space, or choose what percentage refers to...and that's why i am lost.
I can't use flexbox, and don't want to use javascript (but be sure it's not possible with css first).

Answer 1

This can be easily achieved using display: table and display: table-cell.
http://jsfiddle.net/Mgzbq/
HTML
<div class="table main">
<div class="cell left">left</div>
<div class="cell">
<div class="table inner">
<div class="cell center"></div>
<div class="cell right"></div>
</div>
</div>
</div>
CSS
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
vertical-align: middle;/* Keep this as top|middle|bottom, otherwise the container table of center and right div will have "vertical-align: baseline" and doesn't position properly if there is no content in center and right div*/
}
.left {
width: 80px;
background-color: #E07749;
}
.center {
width: 80%;
background-color: #E0DD49;
}
.right {
width: 20%;
min-width: 100px;
background-color: #49E0AE;
}
.main {
width: 100%;
height: 200px;
}
.inner {
width: 100%;
height: 100%;
}

Answer 2

Here is the demo what you want.
CSS
*{
margin: 0
}
body, html, .outer, .leftCol, .rightSec, .innerCnt{
height: 100%;
}
.leftCol {
min-height:100px;
width: 80px;
float: left;
background: red
}
.rightSec {
margin-left:80px
}
.innerCnt {
display: table;
width: 100%;
}
.midCol {
width: 80%;
background: green;
height:100px;
display: table-cell;
}
.rightCol {
min-width: 100px;
display: table-cell;
background: yellow;
height:100px;
}