Center a div next to another fixed div - css

Question

I'm working on this layout:
<div id="outer">
<div id="leftBar"></div>
<div id="middleContainer">
<div id="middle"></div>
</div>
</div>
with this stylesheet:
#outer{
background-color:yellow;
white-space:nowrap;
}
#leftBar{
background-color:purple;
display:inline-block;
height:300px;
width:100px;
}
#middle{
background-color:blue;
height:300px;
width:100px;
margin:0 auto;
}
#middleContainer{
background-color:green;
width:100%;
height:100%;
display:inline-block;
}
http://jsfiddle.net/thirtydot/8ac2e/2/
There's a (purple) side bar that needs to stay fixed and a middle (blue) div that needs to be centered in the remaining space. I've wrapped the blue div in a (green) spacing div, but if I set its width to 100% then it overflows off the page so it doesn't flow correctly.
I've tried using absolute positioning of the side bar but that knocks the centering off too.
How to get the blue div to be centered in the remaining space? I'd rather not use float-left or float-right if possible.

Answer 1

This is a classical situation for floats. It's just most flexible. Use float: left for the sidebar and overflow: hidden for your green middleContainer. This one takes the rest then. And change all display: inline-block to display: block;
http://jsfiddle.net/8ac2e/4/
This even works if your sidebar has flexible dimensions, the divs have different height and so on.

Answer 2

You could absolutely position the left bar, and add a margin-left to the middleContainer equal to the width of the left bar and make the middleContainer display block. See http://jsfiddle.net/8ac2e/5/
#leftBar{
background-color:purple;
display:inline-block;
height:300px;
width:100px;
position: absolute;
}
#middleContainer{
background-color:green;
margin-left:100px;
height:100%;
display:block;
}

Answer 3

Depending on the browser support that you need to consider, you can use calc() to calculate the width of the #middleContainer by subtracting the width of the #leftBar from 100% like this:
#middleContainer{
background-color:green;
width: calc(100% - 100px);
height:100%;
display:inline-block;
}
Fiddle: http://jsfiddle.net/8ac2e/1/
More about calc() including browser support: https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Answer 4

You can solve it using CSS table.
#container{
display: table;
background-color:yellow;
width:100%;
height:100%;
white-space:nowrap;
}
#leftBar{
background-color:purple;
display:table-cell;
height:300px;
width:20%;
}
#middle{
background-color:blue;
height:300px;
width:100px;
margin:0 auto;
}
#middleContainer{
background-color:green;
width:80%;
height:100%;
display:table-cell;
}