This header has a fixed height in pixels. The height is taken into account when specifying the absolute position of the sidebar. If the text in this header grows up tp a point where it does not fit in the fixed height, the overflow is hidden. Note that borders on left and right will cause Mozilla to show an horizontal scroll bar that moves to the total width of the left plus right borders. IE does not do this.

The content position is relative. It has a left padding that takes into account the width of the sidebar. Width is in "em" units here too. Changes in text size will cause the sidebar to adjust in harmony with the content left padding.

Content grows to its required size.

Here is the CSS used in this page:

body{
  font-family: verdana, geneva, tahoma, arial, sans-serif;
  font-size: 76%;
  color:#000;
  padding: 0px 0px 0px 0px; 
  margin: 0px 0px 0px 0px; 
  background:#fff;
}

#header {
  width: 100%;
  height: 73px;
  font-size: 1.0em;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  /* left or right borders force a bottom scroll bar on Mozilla */
  border-bottom: #000 1px solid; 
  overflow: hidden;
  background:#fff;
}

#sidebar {
  font-size: 1.0em;
  position: absolute;
  top: 78px; /* ±1 difference between Mozilla 1.6 and IE 6 */
  left: 8px;
  width: 14em; 
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  border-top: #000 1px solid; 
  border-right: #000 1px solid; 
  border-bottom: #000 1px solid; 
  border-left: #000 1px solid; 
  overflow: hidden;
  background:#fff;
}

#content{
  position: relative;
  font-size: 1.0em;
  border-top: #000 1px solid; 
  border-right: #000 1px solid; 
  border-bottom: #000 1px solid; 
  border-left: #000 1px solid; 
  margin: 10px 10px 0px 12px;
  padding: 0px 0em 12px 15em;
  background:#fff
}
#footer {
  position: relative;
  font-size: 1.0em;
  border-top: #000 1px solid; 
  border-right: #000 1px solid; 
  border-bottom: #000 1px solid; 
  border-left: #000 1px solid; 
  margin: 10px 10px 0px 12px;
  padding: 0px 0em 12px 15em;
  background:#fff
}

Verify with the CSS validator.

The sidebar is set as to absolute position, just below the header. There is a ±1 difference between Mozilla and IE when dealing with absolute positioning but I did not spend time trying to figure out where if the difference is in the header height or in the sidebar top position, or which browser is buggy. My guess is that Mozilla draws the border at the bottom of the header too far down.

The sidebar grows with its content. Overflow is hidden.

Its width is in "em" so that is adjusts to changes in text size.

The footer is similar to the content style: relative position with "em" left padding that fits with the sidebar. The padding is necessary for situations where the content is shorter than the sidebar: the footer is then hidden behind the sidebar.

Note that in Mozilla, the bottom border is hidden below the client area which leads me to believe that the ±1 difference between IE and Mozilla described in the sidebar is due to a bug in Mozilla.

This layout uses relative fonts. The body is set to 76% which has been proven to be a fairly consistent value accross all browsers (I lost the link to this useful page). Each div section is set to 1.0em. Fonts can be re set to other sizes inside each section using em units.

Note about header: both the top and bottom of padding and border affect the total height of the section in Mozilla, while the corresponding left and right values will force the presence of an annoying scroll bar.

This layout was only tested in Mozilla 1.6 and IE 6.