Correct CSS for Two (Left & Mid) Column Fixed Width Left and Right Column Fluid

Question

I am working on a 3 column divs. The Left and Mid columns have fixed widths (57px and 160px respectively) inside the wrapper with a width of 1005px.

the problem is the right column which SHOULD be fluid width and will cover all the remaining space. I've tried using width: (calc 100% - 217px); but it's not working.

I have this code for your reference. I Need your help to point out what's wrong.

body {
    background-color: #444;
    margin: 0;
}
#wrapper {
     width: 1005px;
     min-height:450px;
     margin: 0 auto;
}
#leftcolumn, #rightcolumn, #mid {
    float: left;
    min-height: 450px;
    color: white;
}
#leftcolumn {
     width: 57px;
     background-color: #111;
}
#mid {
     width: 160px;
     background-color: #087;
}
#rightcolumn {
     max-width: calc (100% - 217px);
     background-color: #777;
     display:inline-block;
}

<div id="wrapper">
    <div id="leftcolumn">
        Left
    </div>
    <div id=mid>
        Mid
    </div>
    <div id="rightcolumn">
        Right
    </div>
</div>

http://jsfiddle.net/8weSA/1434/

Answer 1

Don't put space between calc and (, the grammar should be like this:

width: calc(100% - 247px)

Also note the spacing around the - operator, the same spacing is needed for the + operator but not for / and * operators. Your calc() property grammar was not recognized by the browser that's why it didn't work for you.

Some useful links:

calc() property support table

Mathematical Expressions: calc() Fiddle

Answer 2

Although there are solutions given here for calc function. I wanted to show another way this could be done without using the calc() function. Since you made you #right div float left, it never covered the rest space. Check out below code :

body {
    background-color: #444;
    margin: 0;
}

#wrapper {
     width: 1005px;
     min-height:450px;
     margin: 0 auto;
}
#leftcolumn, #mid {
    float: left;
    min-height: 450px;
    color: white;
}
#leftcolumn {
     width: 57px;
     background-color: #111;
}

#mid {
     width: 160px;
     background-color: #087;
}

#rightcolumn {
    
     
     background-color: #777;
     width:auto;
     min-height: 450px;
     color: white;
}

<div id="wrapper">
    <div id="leftcolumn">
        Left
    </div>
    <div id=mid>
        Mid
    </div>
    <div id="rightcolumn">
        Right
    </div>
</div>

Here is your updated fiddle too

Answer 3

in #rightcolumn
modify the line:
max-width: calc (100% - 217px);
to:
width: calc(100% - 217px);

Answer 4

1. Please remove the space between calc and (100% - 217px);

   max-width: calc (100% - 217px); it's wrong.

   max-width: calc(100% - 217px); it's Correct.

2. Use width:100% to #rightcolumn div.

visit my demo... on jsfiddle