text: Q:
  
  css min-width and margin/padding with absolute positioning
  
  I'm using absolute positioning to have 100% height of the screen. I also want to limit the resizing of my page so I add min-width in my header and content divs. The problem I'm facing is that once resizing reaches the min-width boundary, right side margin disappears. Any suggestions how to make it work?
  HTML:
  <div id="header">Header</div>
  <div id="content">Content</div>
  
  CSS:
  html, body{
      background: blue;
      padding:0px;
      margin:0px;
  
  }
  
  #header{
      height:30px;
      background: yellow;
      position: absolute;
      top:20px;
      right:20px;
      left:20px;
      min-width:500px;
  }
  
  #content{
      background:green;
       position: absolute;
      top:50px;
      right:20px;
      left:20px;
      bottom:20px;
      min-width:500px;
  }
  
  jsfiddle
  
  A:
  
  I found a solution my self. The problem is that if you apply min-width on the element which has padding or margin, that padding or margin collapses when you resize the window. So the solution was to wrap that element inside root element and set min-width on the root element.
  P.S. I also tried box-sizing approach suggested by Sam but effect was almost the same: margin shrinks but doesn't disappear all. Applying min-width on outer element solves the issue as well.
  Here is an example
  updated fiddle 
  
  