title: css float and padding
body: <p>This is the HTML layout:</p>
  
  <pre><code>        &lt;div class="wrap"&gt;
             &lt;div id="container"&gt;
                 &lt;div id="left"&gt;...&lt;/div&gt; 
                 &lt;div id="right"&gt;...&lt;/div&gt; 
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I used the <code>float: left</code> to the left div, and <code>float: right</code> to the right div. Then, I used the <code>padding-top: 10px</code> to the container. Why doesn't it work? thank you.</p>
  
  <p>This is my first style:</p>
  
  <pre><code>.wrap {
      float: left;
      width: 1000px
  }
  
  #container{
      background-color: #FFFFFF;
      padding: 10px 10px 0;
      width: 980px;
      float: left;
  }
  
  #left {
      float: left; 
      width: 670px;
  }
  
  #right {
      float: right;
      width: 300px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Kyle_Sevenoaks/86F2A/1/">Example here</a>.</p>