title: Calculate height of Divs around a Div thats height is based on parent width?
body: <p>I have an outer div with the following (condensed to show only relevant) CSS attributes:  </p>
  
  <pre><code>.container{
  position:relative;
  box-sizing:border-box;
  width:calc(100% - 80px);
  margin-left:40px;
  height:calc(100% - 80px);
  }
  </code></pre>
  
  <p>Inside it I have three divs, the top one containing introductory text, the middle one holding content, and the bottom one for visitor comments. The middle one will be a photo slideshow, video clip, map etc. So needs to be a specific aspect ratio, given the width is fluid I am using the following (sample 2:1 ratio) CSS:  </p>
  
  <pre><code>.videoplayer{
  position:absolute;
  box-sizing:border-box;
  width:calc(100% - 40px);
  left:20px;
  top:50%;
  height:0px;
  padding-top:calc(25% - 10px);
  padding-bottom:calc(25% - 10px);
  transform:translate(0,-50%);
  } 
  </code></pre>
  
  <p>By using zero height and making the height from % vertical padding it creates it's height dynamically based on the width of the parent, then top:50%; and transform:translate(0,-50%); position it centrally within the parent div.  </p>
  
  <p>The problem I have is I want the divs that go above and below this one to fit the remaining space above and below it, and I have no idea how to calculate their height!  </p>
  
  <p>The final result I am looking for is:<a href="http://i.imgur.com/6jaP7lr.png" rel="nofollow">THIS</a></p>
  
  <p>Anyone know if this is possible (Ideally with pure CSS) and if so how? </p>
  
  <p>Many thanks :)</p>