why are the margins for some divs?

I need help explaining why the margins are applied to the bottom two boxes in the wrapperdiv and not the top big box. Example

html:

<div id = "mainWrapperdiv"> 
    <div id = "maindiv">  
        <div id = "moveablediv" >
            <div id = "centerPointdiv"></div>
        </div>  
    </div> 
    <div id = "animationsdiv" class = "controls"></div>
    <div id = "optionsdiv" class = "controls"></div>
</div> 

css:

*
{
    padding:        0px;
    margin:         0px;
}

div
{
    border:         1px solid;
}   

#mainWrapperdiv
{ 
    width:          1000px; 
    display:        block;
    margin-left:    auto;
    margin-right:   auto;
}     

/**** CSS approach to forcing the main containter div to include it's floated elements *****/   
#mainWrapperdiv:after
{
    content:            ".";
    display:            block; 
    clear:              both; 
    height:             0px; 
    visibility:         hidden;
}   
/***** end main containter div including floated elements **********************************/ 

#maindiv
{  
    width:          850px;  
    height:         500px;  
    border:         5px solid; 
    margin:         30px 0px 30px 70px; 
    float:          left;
} 

div.controls 
{ 
    width:          400px; 
    height:         200px; 
    border:         5px solid;    
    margin:         20px 20px 10px 70px;
    float:         开发者_Python百科 left;
}

So is the margins for the bottom boxes being applied, when the top big box ignores the left and right margins?

Becouse you have a

border: 5px solid;

Edit:

You have a float for your #maindiv. Try to clear it like this:

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

<div id = "mainWrapperdiv"> 
    <div id = "maindiv" class="clearfix">  
        <div id = "moveablediv" >
            <div id = "centerPointdiv">Center Point div</div>
        </div>  
    </div> 
    <div id = "animationsdiv" class = "controls">Animations div</div>
    <div id = "optionsdiv" class = "controls">Options div</div>
</div> 

And try to put some contents in div's just for testing.

In the div.control (2 div's at bottom) you set margins:

div.controls 
{ 
    width:          400px; 
    height:         200px; 
    border:         5px solid;    
    margin:         20px 20px 10px 70px;
    float:          left;
}