CSS: having 3 divs on the same line as the middle, taking the remaining space

Question

I am creating a toolbar, I want the yellow part in the following example to leave all the space on the 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> 

using 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 on the left and right is dynamic, it can change, so I don’t want to set the width on them

Answer 1

I don't know if this suits you due to 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 that this 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/

Answer 2

Place the middle div after the floating divs:

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

Then do not change any display properties so that they stay on block (default for div )

 .left { float: left; background-color: #ddd; } .middle { background-color: yellow; } .right { float: right; background-color: #ddd; } 

Fiddle: http://jsfiddle.net/hLmj7/

Answer 3

If you don't have a fixed width for two side columns, you can always display:table-cell .

 .left { background-color: #ddd; display: table-cell; } .middle { background-color: yellow; display: table-cell; width:100%; } .right { background-color: #ddd; display: table-cell; } 

JSFiddle example .

With this, you can add min-width to the outer columns without changing the width of the middle element.

JSFiddle example using min-width .

Answer 4

try the following:

Wrong align your last div

make all your containers float:left

and indicate the percentage width of each of your containers so that their total amount is 100%;

working violin

if you do not want to apply static width, follow these steps:

give each of your containers width:auto , but get a notification that

if the total sum of the width of each of the containers is greater than that of the parent (body in your case) containen, then a line break occurs, the div will move to the next line.

see this fiddle

Answer 5

I would wrap your divs in a wrapper and assign a div to the background color of the shell. Then you do not need to specify the width at all. jsfiddle

Html:

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

CSS

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

Consider adding clearfix to your div wrapper, as divs inside are floating :)