left and right divs attached to middle div - css

Question

I'm trying to set auto width for left and right divs so that they are always attached to centered div. My example below uses width: 20%; for left and right divs which should be dynamic. How can I accomplish that?
I looked into these (1, 2, 3) example for ideas but couldn't solve my problem. 3rd is what I want but it didn't work in all browsers.
Feel free to change whole code below as I'm open for better solutions but the center div has to be 850px.
Thanks
<style>
body
{
background: #333333;
}
*
{
margin: 0;
padding: 0;
}
#cover
{
float: left;
width: 100%;
height: 200px;
background: #bababa;
}
#left
{
float: left;
width: 20%;
height: 200px;
background: #cccccc;
}
#center
{
float: left;
width: 850px; /*compulsory*/
height: 200px;
background: #dddddd;
}
#right
{
float: right;
width: 20%;
height: 200px;
background: #eeeeee;
}
</style>
<div id="cover">
<div id="left">LEFT</div>
<div id="center">CENTER</div>
<div id="right">RIGHT</div>
</div>

Answer 1

If you really want to stick to the 850px for the middle, you will have to calculate the width of the entire document, thus using a little javascript : Fiddle
Here is the very basic javascript part.
function menuresize(){
var windowWidth = document.body.offsetWidth;
var menusSize = (windowWidth-850)/2;
if(menusSize<1){
document.querySelector('#left').style.display = 'none';
document.querySelector('#right').style.display = 'none';
}else{
document.querySelector('#left').style.width = menusSize+'px';
document.querySelector('#right').style.width = menusSize+'px';
document.querySelector('#left').style.display = 'block';
document.querySelector('#right').style.display = 'block';
}
}
menuresize();
window.onresize = function(e){menuresize();}
If the page is thinner or equal to 850px, the left and right menus disappear.

Answer 2

Add width to center div in percentage like
<style>
body
{
background: #333333;
}
*
{
margin: 0;
padding: 0;
}
#cover
{
float: left;
width: 100%;
height: 200px;
background: #bababa;
}
#left
{
float: left;
width: auto;
height: 200px;
background: #cccccc;
}
#center
{
float: left;
width: 850px; /*compulsory*/
height: 200px;
background: #dddddd;
}
#right
{
float: left;
width: auto;
height: 200px;
background: #eeeeee;
}
</style>
<div id="cover">
<div id="left">LEFT</div>
<div id="center">CENTER</div>
<div id="right">RIGHT</div>
</div>

Answer 3

see #Ence answer
now just add a new div inside "center" div and apply the class:
#middle{
width: 200px;
background: #f90;
margin:auto;
}
example:
http://jsfiddle.net/vSvTZ/

Answer 4

Here is the working DEMO
CSS
body
{
background: #333333;
}
*
{
margin: 0;
padding: 0;
}
#cover
{
float: left;
width: 100%;
min-width:1420px;
height: 200px;
background: #bababa;
}
#left
{
float: left;
width: 20%;
height: 200px;
background: #cccccc;
left:0
}
#center
{
float: left;
min-width:850px;
width: 60%;
height: 200px;
background: #dddddd;
}
#right
{
float: right;
width: 20%;
height: 200px;
background: #eeeeee;
right:0
}