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>