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/

Image cut-outs(css style) to make icon display

I am on the development side only when it comes to web portals and all, but many of time i have been asked to do some adjustment in CSS (which i feel undesirable, as i am not even OK in it) and some time these web browser behave in a naughty way

So to the issue to tackle is : How to use small images in icons as small icons are sometimes not loaded in IE (you have to pre load them and things like that in javascript)

and the answer is hidden in CSS (i recently came to know about it and implemented my self)

well for this the prerequisites is to have a images with many small icons inside it like this

and a css style class with something like

.icons {

background-image:url(/images/icon_collection.png);

background-repeat:no-repeat;

display:block;

height:18px;

margin-left:10px;

margin-right:6px;

width:18px;

}

.icon_one {

background-position:-156px -83px;

}

and apply it on div like this

<div class="icons icon_one"> </div>

so that can give result like this ...

point to note is

background-position:x-pos y-pos;

:) happy cssing