title: Transparent div containing non transparent content - IE 6 height:100% not working
body: <p>Hey there! I have a bit of a sticky IE 6 problem (don't we all?).</p>
  
  <p>I figured out what I think is a pretty neat way to have a div with a transparent background that shows the background's body image and containing non-transparent content. This consists of three divs really:</p>
  
  <p>One big container div, one absolutely positioned transparent div for the background and one relatively positioned div with the non-transparent content.</p>
  
  <p>I position the two divs inside the containing div so they sit on top of each other giving the appearance of a transparent background with non-transparent content.</p>
  
  <p>The Containing div is pushed to the size of the content div. I set the transparent background's height and width to 100% causing it to take on the containing div's size. This then means that my background expands with the content making all my div's extensable.</p>
  
  <p>This last bit is where the problem comes in. IE 6 does not cause the background div to take on the height of the containing div. If I specify a height it works fine, but this means that I loose the extendability of the whole thing.</p>
  
  <p>Here is the basic code:</p>
  
  <p>HTML code</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;link rel="stylesheet" href="style.css" type="text/css" media="screen" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="contentDiv"&gt;
  &lt;div class="tranparentDiv"&gt;&lt;/div&gt;
  &lt;div class="nonTranparentContent"&gt;
  &lt;div class="contentBody"&gt;
  &lt;h2 id="quote"&gt;“time is given to let you apply what you have learnt in reality.”&lt;/h2&gt;
  &lt;p&gt;– Nandipha Nombuthuma, Concept Interactive graduate&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS code (save as “style.css”)</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  body{
  background:url(bg.png);
  }
  
  .tranparentDiv{
  -khtml-opacity:.6; /*several different ways to set the transparency to ensure cross browser independence*/
  -moz-opacity:.6;
  -ms-filter:"alpha(opacity=60)";
  filter:alpha(opacity=60);
  opacity:.6;
  position:absolute;
  top:0;
  left:0;
  background:#FFFFFF;
  width:100%;
  height:100%;
  }
  
  .nonTranparentContent{
  width:inherit;
  position:relative;
  }
  
  #contentDiv{
  width:500px;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  /*height:200px add this to work in ie 6*/
  }
  </code></pre>
  
  <p>I'd appreciate any suggestions how I could work around this. I would hate to have to go and set a height every time I change my content.</p>