title: make divs stay inside parent div with margins
body: <p>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</p>
  
  <pre><code>&lt;div class="appview_fullscreen app_ama"&gt;
   &lt;center&gt;&lt;strong&gt;AMAMAMAMAMAMA&lt;/strong&gt; &lt;/br&gt;
      &lt;i&gt;AMAMAMA&lt;/i&gt;
   &lt;/center&gt;
  &lt;div class="main_area"&gt;
      &lt;div class="tabs_area"&gt;
  
      &lt;/div&gt;
      &lt;div class="main_window"&gt;
  
      &lt;/div&gt;
      &lt;div class="troubleshoot_area"&gt;
  
      &lt;/div&gt;
      &lt;div class="timeline"&gt;
  
      &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  
  .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%;
  }
  </code></pre>
  
  <p>demo : <a href="http://jsfiddle.net/S8RC3/" rel="noreferrer">http://jsfiddle.net/S8RC3/</a></p>