html - Auto resizing centre div using css? -
i having difficulty getting 3 divs automatically resize when resizing browser window/page.
i have 2 divs of fixed size , want centre div automatically resize fill remaining space , not have third div wrap newline when page size shrinks.
i set min-width property on div wraps 3 divs prevent wrapping of third div once middle div 65px wide.
does have done javascript because trying achieve css having no luck.
the javascript or css expression width = page.width - div1.width -div3.width avoid using js if possible.
thanks help!
mike
you can see expected behavior in attached image.
1) want 2) experiencing on shrinkage
i have div re-sizing , textbox inside set @ 100% re-sizes div.
however right side div can either 267px shown below or 192px (discrete) should set margin-right code behind on pages? or there way make margin-right dynamic based on size of the div right?
eg. html
<div id="wrapper"> <div id="left"></div> <div id="right"></div> <div id="centre"> <div> </div>
css
#wrapper {height:84px; background-image:url(../images/siteimages/header_back.png); background-repeat: repeat-x;} #left {height:inherit; width:512px; background-image:url(../images/siteimages/logo.png); background-repeat: no-repeat; float:left;} #centre {width:auto; margin-left:512px; margin-right:267px; height:inherit;} #right {padding-right:10px; height:inherit; float:right; text-align:right;}
you have like:
<div id="a">...</div> <div id="c">...</div> <div id="b">...</div>
with css:
#a { width: 512px; float: left; } #b { width: auto; margin-left: 512px; margin-right: 200px;} #c { width: 200px; float: right; }
which believe looking for.
Comments
Post a Comment