One fixed width div and two variable

Question

I am trying to get three divs lined up beside each other. the left div has a fixed width, the middle has a percent width, and the third should take up the remaining space. Here is the code I have come up with:

HTML:

<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>

CSS:

#left {
    float:left;
    width:200px;
    height:100px;
    background-color:#A00;
    opacity:0.3;
}
#middle {
    float:left;
    width:55%;
    height:100px;
    background-color:#0A0;
    opacity:0.3;
}
#right {
    background-color:#CCC;
    height:40px;
}

I have made the two left divs transparent so you can see that the background of the right div extends all the way to the left of the page. How can I fix this? I have tried floating the right div however it doesn't fill the rest of the space. here is a fiddle I used.

Answer 1

The easiest solution would be to just wrap the 3 div Elements in a container, like this:

<div id="container">
    <div id="left">Left</div>
    <div id="middle">Middle</div>
    <div id="right">Right</div>
</div>

And then just make the child elements display: table-cell and the parent display: table and width: 100%.

#left, #middle, #right {
    display: table-cell;
}
#container {
    display: table;
    width: 100%;
}

I order to force the #left Element to keep it's width even when there is very little space, I'd suggest to also add min-width: 200px to it's CSS.

Demo: http://jsfiddle.net/eMbV7/11/

Answer 2

S.B. provided a great answer, but here's an alternative method just for fun. You could have everything display:block; like normal, then float:left;, and use calc() to get the width of the final column. It would just be 100% - 55% - 200px, or compressed, 45% - 200px.

Benefit to this is that you don't need to have the #container. Potential issue is browser support, mostly mobile browsers. See: http://caniuse.com/calc

HTML:

<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>

CSS:

#container {
    width: 100%;
}
#left {
    float:left;
    width:200px;
    height:100px;
    background-color:#A00;
    opacity:0.3;
}
#middle {
    float:left;
    width:55%;
    height:100px;
    background-color:#0A0;
    opacity:0.3;
}
#right {
    float:left;
    background-color:#CCC;
    height:100px;
    width:calc(45% - 200px);
}

Demo: http://jsfiddle.net/eMbV7/9/