title: CSS-only: How can I center fixed width div between two divs that fill the remaining space?
body: <p><strong><a href="http://jsfiddle.net/ruMqY/1/" rel="noreferrer">JSFIDDLE</a></strong></p>
  
  <p>EDIT: Trying to achieve the opposite of <a href="http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm" rel="noreferrer">this</a>.<br><sub>(instead of 2 fixed-width divs on the sides and one fluid-width div in the middle,<br>I'm trying to get 2 fluid-width divs on the sides and one div centered in the middle)</sub></p>
  
  <p>I have 3 divs: A, B, and C.</p>
  
  <p>B needs to sit centered between A and C.</p>
  
  <p><img src="https://i.stack.imgur.com/gTvFV.jpg" alt="What I need to do"></p>
  
  <p>What I'm currently doing is pretty much matching what's going on above. But, if A, B, and C's container has an odd width, some browsers are rounding A and C's widths down and others up (leaving C 1px too long and 1px too short, respectively).</p>
  
  <p><sub>notice the extra pixel to the right of <strong>C</strong><br><br></sub>
  <img src="https://i.imgur.com/CGRVt.jpg" alt=""></p>
  
  <p><sub>notice the space to the right of <strong>C</strong> is a pixel thinner.<br><br></sub>
  <img src="https://i.imgur.com/WyL3j.jpg" alt=""></p>
  
  <p>I don't care how many nested divs I need, but I've been spending way too much time on this! If someone already has a sure-fire solution to this problem, please share!</p>
  
  <p>notes:<br>
  - A, B, and C's parent can't have overflow hidden.<br>
  - A, B, and C can't overlap (they have translucent png's)</p>
  
  <p>This is my starting point: <strong><a href="http://jsfiddle.net/ruMqY/1/" rel="noreferrer">JSFIDDLE</a></strong></p>