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
Post a Comment