title: Nested divs are overlapping when divs are smaller than others
body: <p>I am working on a page with a Wrapper div which is the container.</p>
  
  <p>I have 1 div in on right which is using float to stay there. When the main container which is to the left is smaller than the right container, the right container seems to over lap the wrapper. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;body&gt;
      &lt;div id="Wrapper"&gt;
          &lt;div id="Title"&gt;Title&lt;/div&gt;
          &lt;div id="SubTitle"&gt;SubtTitle&lt;/div&gt;
          &lt;br /&gt;
          &lt;div id="Menu"&gt;Home | Our Story | Share A Memory | Information | About Us&lt;/div&gt;
          &lt;br /&gt;
          &lt;div id="CountDown"&gt;
              &lt;div id="CountDownTitle"&gt;Title&lt;/div&gt;
              &lt;hr /&gt;
              Some&lt;br /&gt;
  Random&lt;br /&gt;
  stuff&lt;br /&gt;
          &lt;/div&gt;
          &lt;div id="Info"&gt;
              This is a test. This is only a test. This is a test. This is only a test. This is a test. This is only a test. This is a test. This is only a test. This is a test. This is only a test. This is a test. This is only a test. This is a test. This is only a test. This is a test. This is only a test. This is a test. This is only a test. This is a test. This is only a test. This is a test. This is only a test. This is a test. This is only a test. This is a test. This is only a test. This is a test. This is only a test. This is a test. This is only a test. This is a test. This is only a test. This is a test. This is only a test. This is a test. This is only a test. This is a test. This is only a test. This is a test. This is only a test. 
          &lt;/div&gt;    
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body {
      background-image: url('../PNGs/Background.png');
      font-family: "Palatino Linotype";
      font-size: 14px;
  }
  #CountDown {
      background-color: #FFFFFF;
      border: 1px black solid;
      font-family: "Palatino Linotype";
      font-size: 12px;
      float: right;
      height: auto;
      opacity: 0.6;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 10px;
      text-align: center;
      text-shadow: 0px, 0px, #000000;
      width: 20%;
  }
  #CountDownTitle {
      color: #000000;
      font-family: Pristina;
      font-size: 16px;
      font-weight: bold;
      margin-top: 10px;
      src: url('../Elements/PRISTINA.ttf');
      text-align: center;
  }
  #Info {
      background-color: #FFFFFF;
      border: 1px black solid;
      font-family: "Palatino Linotype";
      display: block;
      height: auto;
      opacity: 0.6;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 10px;
      text-align: justify;
      text-shadow: 0px, 0px, #000000;
      width: 70%;
  }
  #Menu {
      background-color: #FFFFFF;
      border: 1px black solid;
      display: block;
      height: 50px;
      opacity: 0.6;
      width: 100%;
  }
  #SubTitle {
      color: #FFFFFF;
      font-family: Pristina;
      font-size: 18px;
      src: url('../Elements/PRISTINA.ttf');
      text-align: center;
  }
  #Title {
      color: #FFFFFF;
      font-family: Pristina;
      font-size: 48px;
      src: url('../Elements/PRISTINA.ttf');
      text-align: center;
  }
  #Wrapper {
      border: 1px black solid;
      clear: both;
      height: auto;
      margin-bottom: auto;
      margin-left: auto;
      margin-right: auto;
      margin-top: 75px;
      width: 800px;
      z-index: 1;
  }
  </code></pre>