3 column css layout with center fludic and fixed width left right column

How can we make a 3 column layout where left and right most column are with fixed width while the middle column should be fludic (meaning it consumes the whatever is left on screen now)
Concept is pretty simple: Make two two-column layout and insert one into the other :)
Step 01: Make a  two column layout where right column is fixed width and left consumes the left-over screen space.

.container_1 {
   height: auto;
   overflow: hidden;
}
   
.container_1 .right {
    width: 100px;
    float: right;
    background: #DDD;
}

.container_1 .left {
    background: #CCC;
    width: auto;
    overflow: hidden;
}
<div class="container_1">
<div class="right">right content</div>
<div class="left">left content</div>
</div>

Step 02: Make another two column layout where left column is fixed width and right consumes the left-over screen space.

.container_2 {
   height: auto;
   overflow: hidden;
}
   
.container_2 .left_2 {
    background: none repeat scroll 0 0 #BBB;
    float: left;
    width: 180px;
}

.container_2 .right_2 {
    background: none repeat scroll 0 0 #AAA;
    overflow: hidden;
    width: auto;
}
<div class="container_2">
<div class="left_2">left content</div>
<div class="right_2">right content</div>
<div class="clearfix"></div>
</div>

Step 03: Insert container_2 div in container_1's left column div.
Here is the working example
http://jsfiddle.net/praveen_kumar_sinha/fSf8T/