3 Column Layout - Right Column Height Problem

[aj2taylo]

Hello,

I'm attempting to get a new 3 column layout, and the right column height is not extending for the height of the page.

Below is my HTML and CSS - any idea where I've gone wrong?

HTML:

 <div id="body">
 
 <div id="body2">
 <div id="leftshoulder">L&nbsp;</div>
 
 <div id="rightshoulder">R&nbsp;</div>
 
 <div id="bodycontent">
 <div id="header"><a href="/"><img id="logo" 
  alt="Our Company Logo" 
  height="50" src="/images/logo.jpg" width="250" 
  /></a></div>
 
 </div>
 
 </div>
 
 </div>

CSS

body {
 text-align: center;
 z-index: 0;
 background-image: url(/images/rd09/background.jpg);
 background-repeat: repeat-x;
 background-color: white;
}
a:link, a:visited, a:active {
 color: #6C739F;
 text-decoration: none;
}
a:hover {
 color: #859C00;
 text-decoration: underline;
}
 div#body {
 width: 982px;
 margin: 0 auto -90px; /* the bottom margin is the negative value of the footer's height */
 padding:0;
 text-align: center;
 min-height: 100%;
 height: auto !important;
 height: 100%;
 z-index: 0;
 background:url("/images/rd09/topshoulder-gradient.jpg") top left no-repeat;
 }
 div#body2 {
 margin: 0px ; 
 padding: 0px;
 background:url("/images/rd09/topshoulder-gradient.jpg") top right repeat;
 }
 div#leftshoulder {
 float:left;
 width:10px;
 margin:0; 
 padding:0;
 }
 div#rightshoulder {
 float:right;
 width:10px;
 margin: 0px;
 padding: 0px;
 }
div#bodycontent {
 margin:0 10px;
 width: 962px;
 background: #FFF;
 z-index: 0;
 min-height: 100%;
 height: auto !important;
 height: 100%;
 text-align: left;
}
 div#header {
 padding: 10px 0 10px 20px;
}
IMG#logo {
 border: none;
 }

[swa66]

I see no reason why either of your columns would be the same height as their parent or the page or viewport.

In general it's not easy/possible with pure CSS to truly make them the height of the longest column. What is possible is to fake the effect by using background on the parent (look for faux columns).