title: My content disappears when I set the HTML tag to 100% height
body: <p>I have a vertical layout that I want to remain centered on the page. One column stays fixed on the page while the other should scroll according to the content and there are some decorative floating divs that are absolute. I want the scrolling column to display 100% vertically, even if the content doesn't require the height, but I can't seem to get this to work.  I've set the html tag and body tag to height:100%, as well as all of the necessary div tags. Having the html tag set to this attribute causes all of the content except for .content and .share to disappear. </p>
  
  <p>Here is my html:</p>
  
  <hr>
  
  <pre><code>&lt;html&gt;
  
  &lt;body&gt;
  &lt;div class="leaderboard"&gt;&lt;/div&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="share"&gt;
  
  &lt;p&gt;All content © 2011 
      &lt;br /&gt;
      Web Design © &lt;a href="http://www.unillu.com" target="_blank"&gt;Unillu&lt;/a&gt;,  Megan Prior-Pfeifer&lt;/p&gt;&lt;/div&gt;
    &lt;div class="sidebar1"&gt;
      &lt;img src="assets/llama.png" width="168" height="265" alt="Deathllama logo" /&gt;
  &lt;ul class="nav"&gt;
        &lt;li&gt;&lt;a href="howto.html"&gt;&lt;img src="assets/phone.png" width="208" height="15" alt="How to put ringtones on your phone!" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="dinosaur.html"&gt;&lt;img src="assets/kill.png" width="208" height="31" alt="Kill a dinosaur the easy way!" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="ringtones.html"&gt;&lt;img src="assets/ringtones.png" width="208" height="15" alt="Bad ringtones for you to use!" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="legal.html"&gt;&lt;img src="assets/legal.png" width="208" height="15" alt="Use the content accordingly!"/&gt;&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="contact.html"&gt;&lt;img src="assets/contact.png" width="208" height="15" alt="Talk to me!"/&gt;&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="faq.html"&gt;&lt;img src="assets/faq.png" width="208" height="15" alt="Look here before you ask me anything!" /&gt;&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="index.html"&gt;&lt;img src="assets/home.png" width="208" height="15" alt="Go home!"/&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;p&gt;&amp;nbsp;&lt;/p&gt;
      &lt;div class="extraDiv1"&gt;&lt;/div&gt;
    &lt;!-- end #sidebar1 --&gt;&lt;/div&gt;
  
    &lt;div class="content"&gt;
    &lt;div class="extraDiv2"&gt;&lt;/div&gt;
      &lt;p&gt;Contact&lt;/p&gt;
  
      &lt;div class="ads_column"&gt;&lt;/div&gt;
  
  
      &lt;h3 id="text"&gt;Contact Brian, Creator:&lt;/h3&gt;
      &lt;p id="text"&gt;&lt;a href="mailto:brianbritvec@gmail.com"&gt;brianbritvec@gmail.com&lt;/a&gt;&lt;/p&gt;
  
  
      &lt;h5 id="text"&gt;Contact Megan, Webmaster:&lt;/h5&gt;
      &lt;p id="text"&gt;&lt;a href="mailto:mprior@unillu.com"&gt;mprior@unillu.com&lt;/a&gt;&lt;/p&gt;
  
  
    &lt;!-- end .content --&gt;&lt;/div&gt;
  &lt;!-- end .container --&gt;&lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>And here is my CSS:</p>
  
  <pre><code>html, body {
      margin: 0;
      padding: 0;
      color: #FFF;
      font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
      font-size: 100%;
      line-height: 1.4;
      background-color: #61ADC3;
  }
  html {
      min-height:100%;
  
  }
   body, .container, .content, .extraDiv2, .sidebar{
      height:100%;
      min-height:100%;
  }
  
  /* ~~ Element/tag selectors ~~ */
  ul, ol, dl { 
      padding: 0;
      margin: 0;
  }
  h1, h2, h3, h4, h5, h6, p {
      margin: 10; 
      padding-right: 15px;
      padding-left: 15px; 
  }
  a img { 
      border: none;
  }
  
  a:link, a:visited, a:hover, a:active, a:focus{
      color: #FFF;
      text-decoration: underline; 
  }
  
  
  .container {
      width: 640px;
      margin: 0 auto; 
      overflow: hidden; 
      background-color: #61ADC3;
  
  
  }
  
  
  .sidebar1 {
      z-index: 2;
      float: left;
      width: 224px;
      padding-bottom: 10px;
      position: fixed;
      background-attachment: fixed;
      background-color: #61ADC3;
      background-repeat: no-repeat;
      background-position: right top;
      text-align: right;
      padding-right: 32px;
  }
  
  .extraDiv1{
      z-index:3;
      position:absolute;
      top:0;
      width:29px;
      height:609px;
      margin-left:227px;
      background-image: url(assets/sidebar.png);
      background-repeat: no-repeat;
      background-position: left top;
      }
  
  .extraDiv2{
      z-index:5;
      position:fixed;
      margin-top:-10px;
      width:12px;
      background-image: url(assets/stripe.jpg);
      background-repeat: repeat-y;
      background-position: left;
      }
  
  .content {
      z-index:5;
      width: 384px;
      float: right;
      padding-top: 10px;
      padding-right: 0px;
      padding-bottom: 10px;
      background-image: url(assets/gradient.png);
      background-repeat: no-repeat;
      background-position: right top;
      background-attachment: scroll;
      background-color: #FBB03B;
  
  }
  
  
  /* Hack for IE */
  * html .content {
      height: 100%;
  }
  /* End IE Hack */
  
  .leaderboard {
  
      width:795 px;
      margin: 0px auto;
      background-color: #61ADC3;
  }
  #descriptions {
      font-size: 12px;
      line-height: 1;
      display: block;
      width: 170px;
      margin:15px 55px;
  }
  
  #descriptions h5 {
      font-size:14px;
      font-weight:bold;
  }
  
  #text {
      font-size: 12px;
      line-height: 1;
      width: 200px;
      margin: 15px 25px;
  }
  
  #text h5{
      font-size: 14px;
      font-weight: bold;
  }
  
  #play {
      width: 25px;
      margin-right:0px;
      float:left;
  }
  
  
  
  
  .share {
      z-index:5;
      font-size:9px;
      bottom: 0px;
      text-align: right;
      width: 256px;
      position:fixed;
      float: left;
      color: #F00;
  }
  
  .share a {
      color: #C30;
  }
  
  #ads_column {
      float:right;
      padding: 5 px 5 px 0 px 5px;
  }
  
  
  .content ul, .content ol { 
      padding: 0 15px 15px 40px; 
  }
  
  
  ul.nav {
      list-style: none; /* this removes the list marker 
  }
  ul.nav li {
      display: block;
      margin: 5px;
  }
  ul.nav a, ul.nav a:visited { 
      margin: 5px;
      display: block;
  
      text-decoration: none;
  
  }
  ul.nav a:hover, ul.nav a:active, ul.nav a:focus { 
      border:1px;
      border-color: #F30;
  }
  </code></pre>