css - Problems with stretching center div between fixed width divs -


i have 3 divs inline. 2 of have set px widths(outside divs). want center div fill in space between 2 outside divs when window adjusts.

here's example of attempt: http://jsfiddle.net/3zpht

    #div_1 {     float: left;     background: red;     display: inline-block;     width: 300px;     height: 50px;     text-align: left;} #div_2 {     overflow: hidden;     background: green;     display: inline-block;     height: 50px;     text-align: center; } #div_3 {     float: right;     display: inline-block;     background: blue;     width: 350px;     text-decoration: underline;     font-weight: bold;     color: white;     height: 50px;     text-align: right; } 

here's idea of want like: http://jsfiddle.net/q8evz

any appreciated, thank you.

demo: http://jsfiddle.net/3zpht/1/

html:

<div>     <div id="div_1">left col static width 300px</div>     <div id="div_3">right col static width 350px</div>     <div id="div_2">center col dynamic width</div> </div> 

css:

#div_1 {     float: left;     background: red;     display: inline-block;     width: 300px;     height: 50px;     text-align: left;} #div_2 {     overflow: hidden;     background: green;     display: block;     height: 50px;     text-align: center; } #div_3 {     float: right;     display: inline-block;     background: blue;     width: 350px;     text-decoration: underline;     font-weight: bold;     color: white;     height: 50px;     text-align: right; } 

Comments

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

c++ - qgraphicsview horizontal scrolling always has a vertical delta -