title: How to keep outer div not be pushed out by inside div's padding/margin?
body: <p><a href="http://jsfiddle.net/longnt80/Lca5c/" rel="noreferrer">Here's the jsfiddle example</a></p>
  
  <p>Here's the html:</p>
  
  <pre><code>&lt;div class="header"&gt;header&lt;/div&gt;
      &lt;div class="wrapper"&gt;
          &lt;div class="left"&gt;&lt;div class="content"&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;div class="right"&gt;right&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here's the css:</p>
  
  <pre><code>.left{
  position:absolute;
  width:30%;
  background:red;
  left:0;
  height:100%;
  display:block;
  padding:5px;
  }
   .right{
  overflow:hidden;
  background:green;
  position:absolute;
  right:0;
  width:70%;
  height:100%;
  }
  
  html, body{
  min-height:100%;
  height:100%;
  padding:0px;
  margin:0px;
  position:relative;
  }
  
  body {position:relative;}
  
  .wrapper {
  position:relative;
  height:100%;
  }
  
  .header{
  width:100%;
  height:100px;
  background:yellow;
  display:none;
  }
  
  .left .content {
  background:blue;
  height:inherit;
  width:100%;
  }
  </code></pre>
  
  <p>You can see the red div being pushed out by the blue div. How can I prevent that? All the width and height are based on %. The only way I know is to give the red div a fixed width. I s there any other way that it can be done with %?</p>