css float and padding

Question

This is the HTML layout:

        <div class="wrap">
           <div id="container">
               <div id="left">...</div> 
               <div id="right">...</div> 
            </div>
        </div>

I used the float: left to the left div, and float: right to the right div. Then, I used the padding-top: 10px to the container. Why doesn't it work? thank you.

This is my first style:

.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;
}

Example here.

Answer 1

When you float an element, it's effectively taking it out of the document flow, so adding padding to its parent won't have an effect on it. You could use margin-top: 10px; on both of your inner divs.