Question

I am having difficulty getting 3 divs to automatically resize when resizing the browser window/page.

I have two divs of fixed size and I want the centre div to automatically resize to fill the remaining space and not have the third div wrap to a newline when the page size shrinks.

I will set a min-width property on the div that wraps the three divs to prevent the wrapping of the third div once the middle div is about 65px wide.

Does this have to be done with javascript because I am currently trying to achieve this with css but am having no luck.

the javascript or css expression would be something like width = page.width – div1.width -div3.width but I would like to avoid using js if possible.

Thanks for any help!

Mike

You can see the expected behavior in the attached image.

1) What I want
2) What I am currently experiencing on shrinkage

I have the div re-sizing and a textbox inside set at 100% so that it re-sizes with the div.

However the right side div can either be 267px as shown below or 192px (discrete) should I just set the margin-right with code behind on certain pages? Or is there a way to make the margin-right be dynamic based on the size of the 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;}

Answer 1

You could have something like:

<div id="a">...</div>
<div id="c">...</div>
<div id="b">...</div>

With this CSS:

#a { width: 512px; float: left; }
#b { width: auto; margin-left: 512px; margin-right: 200px;}
#c { width: 200px; float: right; }

Which I believe would do what you are looking for.