make divs stay inside parent div with margins

css, html

Solution

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>`

Problem

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/

Original source