HTML: div size? - css

Question

I have 3 divs, all contained within a parent They are in parent-div.
Here's my HTML:
<div id="header">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
And my CSS:
#left
{
float: left;
width: 334px;
background-image: ...;
}
#middle
{
float: left;
width: ???;
background-image: ...;
}
#right
{
float: left;
width: 280px;
background-image: ...;
}
I want the #left and #right divs to have static sizes and non-repeating backgrounds. However, the #middle div should resize depending on the page size. How can I write my CSS so that the #middle div changes its with dynamically, apart from the width of the other two divs?

Answer 1

I think:
#left
{
float: left;
width: 334px;
background-image: ...;
}
#middle
{
margin-left: 334px;
margin-right: 280px;
background-image: ...;
}
#right
{
float: right;
width: 280px;
background-image: ...;
}
and then you will need to change the order of the DIVs slightly:
<div id="header">
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
</div>

Answer 2

But middle should resize due to window/page size!
Unfortunately, there is no way to express the calculation you want (width: 100%-614px) in CSS. So you have to let the width default to ‘auto’, which means ‘100% minus any margins, paddings and border’, and then use margins or padding on the middle element of the same size as the left and right elements.
Mark B suggests one approach to this using floats; you can also do it by relative-positioning the parent and absolutely positioning the left and right child elements, which has the advantage of not requiring a re-ordering of the elements.
You should be further able to absolute-position the middle element by its left and right properties as suggested by John, but this ‘edge-positioning’ technique doesn't work in IE6, so instead the middle element has to have margins in the same was as the float example.
If you are just trying to put a border image on the left and right of your element you can do that more easily using nested background images:
<div id="header"><div class="left"><div class="right">
content...
</div></div></div>
<style type="text/css">
#header { background: url(/img/header-background.gif); }
#header .left { background: url(/img/header-left.gif) top left repeat-y; }
#header .right { background: url(/img/header-right.gif) top right repeat-y; }
#header .right { padding: 0 280px 0 334px; }
</style>

Answer 3

something like this seems to work
#left
{
position:absolute;
top:0;
left:0;
width: 334px;
border:solid 1px red;
}
#middle
{
position:absolute;
top:0;
left:339px;
right:285px;
border:solid 1px green;
}
#right
{
position:absolute;
top:0;
right:0;
width: 280px;
border:solid 1px blue;
}
also, if you made the parent div have position:relative; these three divs would be positioned absolutely within that parent.