CSS - Fluid column [duplicate] - css

Question

This question already has answers here:
Div layout with 3 columns: fixed - liquid - fixed
(2 answers)
Closed 9 years ago.
Here is my code: http://jsfiddle.net/2Mtcq/.
I want the middle column to be fluid, but left and right colums - to be set width. How do I make the middle fluid? I want it to look something like:
https://dl.dropboxusercontent.com/u/22358199/Screen%20Shot%202013-05-31%20at%2011.00.31%20AM.png
body {
margin:10px;
}
#header {
width:600px;
background-color: #f0efee;
}
#main{
width:600px;
}
#leftcol {
background-color: #f0efee;
float:left;
margin: 10px 10px 10px 0;
width:100px;
}
#midcol {
background-color: #FFC;
margin: 10px 10px 10px 0;
float:left;
}
#rightcol {
background-color: #FCF;
float: left;
margin: 10px 0 10px 0;
width:100px;
}
#footer {
width:600px;
background-color: #f0efee;
clear:both;
}

Answer 1

Working jsFiddle Demo
Change your HTML to this one:
<div id="main">
<div id="leftcol">Left</div>
<div id="rightcol">Right</div>
<div id="midcol">Middle middle Middle middle Middle middle</div>
</div>
I've put midcol after left and right.
And in your CSS:
Float your rightcol element with right.
Change the margin of midcol to margin: 0 110px; (from left and right, each 110px: 100px for columns, 10px for gaps.
Add margin: 10px 0; to #main element.
Remove unnecessary properties.
Here you are:
#main {
width:600px;
margin: 10px 0;
}
#leftcol {
background-color: #f0efee;
float:left;
width:100px;
}
#midcol {
background-color: #FFC;
margin: 0 110px;
}
#rightcol {
background-color: #FCF;
float: right;
width:100px;
}
Also you can make your #main width to 100% for having a full page width:
#main {
width: 100%;
margin: 10px 0;
}

Answer 2

If you are not supporting IE8, you can use calc on your CSS.
#midcol {
background-color: #FFC;
margin: 10px 10px 10px 0;
float:left;
width: calc(100% - 220px);
}
For see browser support click here

Answer 3

Try This
#midcol {
min-width:100px;
width:auto;
background-color: #FFC;
margin: 10px 10px 10px 0;
float:left;
}

Answer 4

Have a look at this, gives an explanation about this: Div width 100% minus fixed amount of pixels
it explains all the details
the best solution i see is using css calc as stated in that link.
example here: http://jsfiddle.net/2Mtcq/7/
#midcol {
background-color: #FFC;
margin: 10px 10px 10px 0;
float:left;
width: -moz-calc(100% - 220px);
width: -webkit-calc(100% - 220px);
width: calc(100% - 220px);
}
browser support of calc here: http://caniuse.com/calc
you could use that and as a worst case have JS fallback.