title: <div> wrapper dynamic height
body: <p>I have a wrapper that contains all the elements of an html page.</p>
  
  <pre><code>#wrapper {
       width: 1000px;
       height: auto;
       min-height: 100%;
       margin: auto;
       background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4488ff), to(#4422ff));
  [...]
       background-attachment: fixed;
       -moz-border-radius:20px;
       -webkit-border-radius:20px;
       border-radius:20px;
  }
  </code></pre>
  
  <p>Here's the HTML code sample</p>
  
  <pre><code> &lt;div id="wrapper"&gt;
          &lt;div id="uppermenu"&gt;
               &lt;div id="container"&gt;
                    &lt;div id="logo"&gt; &lt;img src="images/logo.png" height="100%"&gt; &lt;/div&gt;
                    &lt;div id="banner"&gt; &lt;br&gt;&lt;/div&gt;
               &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="sidemenu"&gt; [...] &lt;/div&gt;
          &lt;div id="guide"&gt; [...] &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>I want this wrapper to change its height depending on the content it has to contain, but as I do this is not happening.
  If I try to use</p>
  
  <pre><code>overflow: hidden;
  </code></pre>
  
  <p>the wrapper is shifted down by the uppermenu div (which it should be containing) and using</p>
  
  <pre><code>clear: both;
  </code></pre>
  
  <p>at the end of the contents doesn't change anything.
  I've tried at least 5 different question answered correctly here but none worked well for me.
  Last thing: the wrapper set as I wrote (with min-height at 100%) fits perfectly the screen of my browser, but that clearly not what I want it to look! 
  Any help???</p>
  
  <p>EDIT: here's the CSS of sidemenu class</p>
  
  <pre><code>.sidemenu {
        float: left;
        margin-left: 20px;
        margin-top: 20px;
        height: 200px;
        width: 150px;
        background-color: #4488ff;
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
        border-radius:10px;
        z-index: 3;
  }
  </code></pre>
  
  <p>and of the guide id</p>
  
  <pre><code>#guide {
     float: left;
     margin-top: 20px;
     margin-left: 50px;
     height: 100%;
     width: 760px;
     background-color: #4488ff;
     -moz-border-radius:10px;
     -webkit-border-radius:10px;
     border-radius:10px;
     z-index: 3;
  }
  </code></pre>
  
  <p>uppermenu and container</p>
  
  <pre><code>#uppermenu {
         position: fixed;
         top: 0px;
         width: 1000px;
         height: 100px;
         margin: auto;
         background: #004465;
         z-index: 5;
  }
  #container {
       width: 1000px;
       min-height: 100%;
       margin: auto;
  }
  </code></pre>