CSS: Having 3 div on the same line with the middle one taking the remaining space

css, html

Solution

I don't know if that suits you because of a slight HTML change:

<div class="left"> Some content </div>
<div class="right"> Some other content </div>
<span class="middle"> This should fill the space </span>

But I believe it is what you want,

CSS:

.left {
    float: left;
    background-color: #ddd;
}
.middle {
    background-color: yellow;
    display: block;
    overflow:hidden;
}
.right {
    float: right;
    background-color: #ddd;
}

DEMO :http://jsfiddle.net/pavloschris/MWjGH/12/

Problem

I'm building a toolbar, I'd like the yellow part in the following example to take the whole space left (in white): http://jsfiddle.net/MWjGH/1/ ``` <div class="left"> Some content </div> <span class="middle"> This should fill the space left </span> <div class="right"> Some other content </div> ``` with css: ``` .left { float: left; background-color: #ddd; display: inline-block; } .middle { background-color: yellow; display: inline-block; } .right { float: right; background-color: #ddd; display: inline-block; } ``` Edit: the content of left and right is dynamic, it can change, so I don't want to set width on them

Original source