Neatly centering a div between one floated left and one floated right - html

Question

If I have a div which I want to center between two other divs, one floated left and one floated right, giving it a margin of exactly 10 pixels on either side (between it and the div on that side), how would I give it a fluid width, such that it would get wider or narrower as the window size is changed, but always maintain a distance of exactly 10 pixels between it and the divs on either side?

Answer 1

Try this fiddle. Solution works with pure CSS.
The trick is: width: 230px; /* 10 more width than column size */
http://jsfiddle.net/ngdS9/1/

Answer 2

Here's a fiddle of my answer:
http://jsfiddle.net/utThB/
If your left and right div elements are of variable witdh, the only way I can see this done is to dynamically get the width of the left and right divs via jQuery (or pure JavaScript, ask me for this version) and then adding the margin style to the centered div.
jQuery:
$(document).ready(setWidth);
function setWidth(){
var $left_width = $(".left").width() + 10;
var $right_width = $(".right").width() + 10;
$(".center").css("margin-left",$left_width + 'px');
$(".center").css("margin-right",$right_width + 'px');
}
HTML:
<div class="container">
<div class="left">Variable width DIV</div>
<div class="right">Another.</div>
<div class="center">Centered Div</div>
</div>
CSS:
.container{width:100%;}
.left{
float:left;
background-color:green;
}
.center{
text-align:center;
background-color:blue;
width:auto;
}
.right{
float:right;
background-color:red;
}

Answer 3

Try this. Here's a fiddle
HTML
<div id=wrapper>
<div id=leftdiv>left</div>
<div id=rightdiv>right</div>
<div id=main>
Lorum Ipsum
</div>
</div>
CSS
#main {
padding-right:60px;
padding-left:60px;
}
#leftdiv {
float:left;
width:50px;
background-color:#ddd;
}
#rightdiv {
float:right;
width:50px;
background-color:#ddd;
}