make divs stay inside parent div with margins

Question

i've been looking around to fix this, i havent seen a good answer on why this happens and how i can fix it.. basically i have a div that i set to 100% width and height, inside i have like a tabs section like on a broswer, i added a margin and padding to the main area, and when i set the tabs div to full width it sticks out some pixels, whats the correct way to deal with child divs sticking out of parents divs when playing with %'s and margins/padding

<div class="appview_fullscreen app_ama">
 <center><strong>AMAMAMAMAMAMA</strong> </br>
    <i>AMAMAMA</i>
 </center>
<div class="main_area">
    <div class="tabs_area">

    </div>
    <div class="main_window">

    </div>
    <div class="troubleshoot_area">

    </div>
    <div class="timeline">

    </div>
 </div>
</div>


.appview_fullscreen
{
    width: 100% !important;
    height: 100%;
    background-color: black;
    color: white;
    font-size: 20px;
    margin: 0px;
}
.app_ama
{

}
.main_area
{
    border: 1px solid green;
    width: 100%;
    padding: 2px;
    margin: 0px;
}
.tabs_area
{
    border: 1px solid green;
    height: 20px;
    width: 100%;
}

demo : http://jsfiddle.net/S8RC3/

Answer 1

By simply removing 100% from the DIV elements.

DEMO

.main_area{
    /* width:100%; Why? I'm a DIV! */
    border: 1px solid green;
    padding: 2px;
    margin: 0px;
}
.tabs_area{
    /* width:100%; Why? I'm a DIV! */
    border: 1px solid green;
    height: 20px;
}

DIV as being a Block level element is already wide as it's parent container.

Additionally you have a typo: </br> should be <br />, <br/> or <br>