HTML: div size?

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 DIV's slightly:

<div id="header">
   <div id="left"></div>
   <div id="right"></div>
   <div id="middle"></div>
</div>

Answer 2

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.

Answer 3

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>