Three-Column Layout... left (fixed px), center (50%), right (50%) - css

Question

I want the left column to be 40px. I want the center column to be 50% of the remaining viewport and I want the right column to be the other 50% of the remaining viewport.
It should look something like this:
[LEFTCOLUMN][...CENTER COLUMN...][...RIGHT COLUMN....]
[...40px...][........50%........][........50%........]
The solution presented here (link) will not work for my case as the center column can become too collapsed on mobile devices.
Thanks!

Answer 1

I think this may work for you:
http://jsfiddle.net/KR9zj/
Essentially the trick is to float LEFTCOLUMN, and wrap both CENTERCOLUMN AND RIGHTCOLUMN in a wrapper with overflow: hidden.

Answer 2

Use display:table; and display:table-cell;. No need to struggle with float:x;.
HTML:
<div id='container'>
<div id='first'>a</div>
<div id='second' class='fifty'>b</div>
<div id='third' class='fifty'>c</div>
</div>​
CSS:
#container { display:table; width:100%; }
#container > * { display:table-cell; }
#first { width:40px; min-width:40px; }
#container .fifty { width:50%; }
Live example: http://jsfiddle.net/j25wK/

Answer 3

Will this work?
Demo: http://jsfiddle.net/BVhCZ/
As you can see, the left is absolute, and "remaining" is one block div that containing two 50% floated children. Should work for any width >~ 40px
Code:
<div class="left">LEFT</div>
<div class="content">
<div class="content-left">CONTENT LEFT</div>
<div class="content-right">CONTENT RIGHT</div>
</div>
.left {
position: absolute;
top: 0;
left: 0;
width: 40px;
background-color: #ddd;
}
.content {
margin-left: 40px;
}
.content .content-left {
float: left;
width: 50%;
clear: none;
background-color: #fdd;
}
.content .content-right {
float: right;
width: 50%;
clear: none;
background-color: #ddf;
}