html - 3 DIVs next to each other with middle filling the void -

html - 3 DIVs next to each other with middle filling the void -

hello inquire how set 3 div next each other while middle 1 filling void between first , 3rd div.

i to have dynamic buttons in first nad 3rd div , need middle div fill space between div 1 , three.

i brefer pure css / html (no javascript)

here try:

http://jsfiddle.net/4smx3627/

#wrapper{ height: 30px; } #first{ height: 100%; background-color:red; float: left; display: inline-block; } #second{ height: 100%; background-color:green; display: inline-block; } #third{ height: 100%; background-color:yellow; float: right; display: inline-block; }

thank much advice.

there many ways accomplish this. modern way accurately reflects description "flexbox", may need careful of browser support. if you're interested in latest browser versions, it's option. here's example

jsfiddle http://jsfiddle.net/sxx65mhq/

html

<div class="container"> <div>first</div> <div class="middle">second</div> <div>third</div> </div>

and css

.container { display: flex; } .middle { flex-grow: 1; }

for browser support, see http://caniuse.com/#feat=flexbox

html html5 css3 positioning