title: Help with DIV layout and CSS height
body: <p>Please see the screenshot. I am trying to produce a layout that allows me to apply shadow to either side of the main div using the divs left (headerLeft) and right(headerRight), I then have the content div(header) that holds the header content. This is all wrapped in a div (headerWrapper). I am using 4 divs to do this. I have it working on my header, nav bar and another bar I am using. This is shown with the colour coded divs on the screenshot. The reason this works is because my CSS is using heights given in pixels. However I have problem. I want to apply this to my main content, but it won't work. The content is going to change in height from page to page this is fine, however my divs that contain the shadows don't appear, unless I give them a fixed pixel height. Please help.The red areas show where the left and right divs containing the shadows should appear.</p>
  
  <p><a href="http://www.webquark.co.uk/layoutProblem.jpg" rel="nofollow noreferrer">layoutProblem http://www.webquark.co.uk/layoutProblem.jpg</a> </p>
  
  <p>Here is the CSS I have for the layouts that work:</p>
  
  <pre><code>    #header{
  margin:0 auto; 
  height:160px;
  width: 76%;
  min-width:850px;
  font-size: 14pt;
  font-family: Calibri, Verdana, Ariel, sans-serif;
  color: #ffffff;
  background-image: url(headerBG.jpg);
  background-repeat: repeat-x; 
  }
  
  #headerWrapper{
  height:145px;
  width:100%;
  /**background-color: #202020;**/
  }
  
  #headerLeft
  {
  float: left;
  width: 12%;
  height:145px;
  background-image: url(shadowLeft.png);
  background-repeat: repeat-y;
  background-position: center right;
  /**background-color: #1e1e1e;**/
  }
  
  #headerRight
  {
  float: right;
  width: 12%;
  height:145px;
  background-image: url(shadowRight.png);
  background-repeat: repeat-y;
  background-position: center left;
  /**background-color: #1e1e1e;**/
  }
  </code></pre>
  
  <p>Basicly I think I need away of making the left and right divs height 100%, I have tried setting the height to 100% but it doesnt work. I also have my body height set to 100%</p>
  
  <p>Cheers, hope you can help. </p>
  
  <p>HTML for the working top bar and Header: </p>
  
  <pre><code>&lt;div id="topWrapper"&gt;
  &lt;div id="topRight"&gt;
  &lt;/div&gt;
  &lt;div id="topLeft"&gt;
  &lt;/div&gt;
  &lt;div id="top"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  
   &lt;div id="headerWrapper"&gt;
   &lt;div id="headerRight"&gt;
  &lt;/div&gt;
  &lt;div id="headerLeft"&gt;
  &lt;/div&gt;
   &lt;div id="header"&gt;
   &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>