title: How do I make a absolute positioned div have a width equal to it's parent minus some margin
body: <p>I want to have an inner div that sites inside different sized container divs, and starts at a fixed left position and then has a width that fills up the rest of the container.  I've included some example css below to try to get the point across.  </p>
  
  <p>I have to use absolute positioning so can't just float right and set a left-margin.  Any ideas of how to make this work with absolute positioning?  I've also tried width: auto and some different box-sizing options.</p>
  
  <p>To clarify, the trickiness of this is that the left border has to be fixed, and the left border has to be against the right border of the container.  I can't use position: relative, and javascript, but I'd probably end up making .inner1 and .inner2 divs with hard-coded widths before doing that.  But hoping to avoid that.</p>
  
  <pre class="lang-css prettyprint-override"><code>.container1 {
    position: relative;
    width: 400px;
    height: 300px;
  }
  
   .container2 {
    position: relative;
    width: 500px;
    height: 300px;
  }
  
  .inner {
    position: absolute;
    top: 0px;
    left: 200px;
    height: 100%;
    width: 100%;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/yATkl.gif" alt="enter image description here"></p>