title: Can't make DIV float inside parent div
body: <p>I've got 2 DIV elements (the ones labeled "Module" below that are not acting right! when i try to float them, so that they show up side by side, they jump outside of the parent container and fall below it. i've not been able to figure this out, can someone help?</p>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/FAPCW/" rel="nofollow">jsfiddle</a></p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div id="contentwrap"&gt;
          &lt;div id="content"&gt;
              &lt;div&gt;
                  &lt;span style="text-align:center;"&gt;
                      &lt;h2&gt;Application Title&lt;/h2&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
              &lt;br/&gt;
              &lt;br/&gt;
              &lt;div class="module"&gt;
                  &lt;a class="modlink" href=" ../csc/index.php"&gt;
                      &lt;img class="modimg" src="./images/csc.png" alt="csc"/&gt;
                      &lt;br/&gt;Client Support Center
                  &lt;/a&gt;
                  &lt;br/&gt;
              &lt;/div&gt;
              &lt;div class="module"&gt;
                  &lt;a class="modlink" href=" ../icm/index.php"&gt;
                      &lt;img class="modimg" src="./images/icm.png" alt="icm"/&gt;
                      &lt;br/&gt;Inventory Control Management
                  &lt;/a&gt;
                  &lt;br/&gt;
              &lt;/div&gt;                
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>    body {
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 13px;
          color:#E1E6FA;
          background-color:#183152;
      }
  
      p {
          padding: 10px;
      }
  
      h1 { 
          font-size: 2em; 
      }
      h2 { 
          font-size: 1.5em; 
      }
      h3 {
          margin-bttom:2px;
      }
  
      #wrapper {
          margin: 0 auto;
          width: 1000px;
      }
  
      #headerwrap {
          width: 1000px;
          float: left;
          margin: 0 auto;
      }
  
      #header {
          height: 100px;
          background: #375D81;
          border-radius: 10px;
          border: 1px solid #C4D7ED;
          margin: 5px;
      }
  
      #contentwrap {
          width: 820px;
          float: left;
          margin: 0 auto;
      }
  
      #content {
          background: #ABC8E2;
          border-radius: 10px;
          border: 1px solid #C4D7ED;
          margin: 5px;
          color:black;
      }
  
  
      #companylabel {
          margin: 10px;
          top:50%;
          position:absolute;
          margin-top:-.5em;
      }
  
      #loginbox
      {
          width:100%;
  
      }
  
      #loginboxbot
      {
          width:100%;
  
      }
  
      .ra
      {
          text-align:right;
      }
  
      #borderresults {
          color:orangered;
          font-weight:bold;
          padding:0px;
          margin:0px;
          border-radius:10px;
      }
  
      #alert {
          background-color:yellow;
      }
  
      .module {
          text-align:center;
          width:120px;
          padding:5px;
          border-radius:5px;
          border: 1px solid #E1E6FA;
          color:#E1E6FA;
          background-color:#375D81;
          float:left;
      }
  
      .modimg {
          height:100px;
          width:100px;
      }
  
      .modlink {
          color:#E1E6FA;
          text-decoration:none;
      }
  </code></pre>