Stretch div width to match another

Question

I have an html layout like the following:

<div id="header"></div> 
<div id="body"></div> 
<div id="footer"></div>

If the header is a fixed width, how can I force it to stretch to match the width of the body - for cases where the body is wider than the header.

Answer 1

First, encapsulate all your divs in a parent div. This sets a boundary to prevent certain divs from outgrowing others and makes the min-width hack a little easier to use.

<div id='container'>
  <div id='header'></div>
  <div id='body'></div>
  <div id='footer'></div>
</div>

Then, in your CSS, use the following min-width hack to make the minimum width directive work across all browsers. The details of how it works are included in the comments. Note that when referring to IE, I mean IE 6-7, I believe IE 8 works like all other browsers.

#header {
   min-width:800px;   /*minimum width for non-ie browsers, ignored by ie*/
   width: 100% !important; /*width will autoexpand as necassary in non-ie browsers*/
   width: 800px;  /*ie uses width as a min-width by default.*/  
   /*Also IE ignores !important and instead uses the last directive found*/
}

Now as the body div expands to a size greater than that of the header, the header will expand to match it.

Answer 2

I agree with Ian Elliott, I suspect you do not really need it. Maybe centering will do.

If you do need an instrument that allows header to match width with content that follows, table is that instrument. Table with three one cell rows will produce the layout you want, and it used to be a standard way to layout sites. Are you trying to match some old layout?