title: My div doesn't stay inside my div container
body: <p>I have a three divs and I am giving them absolute positioning.  However, they are not staying inside my container div.</p>
  
  <p>Here is the code:   </p>
  
  <pre><code>&lt;body &gt;
      &lt;div id="container"&gt;
          &lt;div id="col1"&gt; testing one&lt;/div&gt;
          &lt;div id="col2"&gt; testing two&lt;/div&gt;
          &lt;div id="col3"&gt; testing three&lt;/div&gt;
          &lt;br/&gt;&lt;p/&gt;ksjdlfkjsldkjfl;s
  </code></pre>
  
  <p>Here is the CSS for my three divs and my container:</p>
  
  <pre><code>div#container {
      position:reletive;
      border-spacing: 10px;
      margin: 100px 80px auto;
      padding: 0  100px10px;
      background-color: #EEEEEE;
      width: 800px;
       -moz-border-radius-topleft: 10px;
      -webkit-border-top-left-radius: 10px;
      border: 1px solid;
  }
  
  div#col1{
      position:absolute;
      float: left;
      left:0;
      width:220px;
      background-color :red;
  }
  
  div#col2{
      position:absolute;
      float: left;
      left:220px;
      width:220px;
      background-color :yellow;
      padding: 10px auto ;
  }
  
  div#col3{
      position:absolute;
      float: left;
      left:500px;
      width:100px;
      background-color :green;
      padding: 10px auto;
  }
  </code></pre>