title: CSS for three column display
body: <p>I want to create the following three column layout. The middle column will be of variable size and be centered. The left and right column will grow or shrink to meet the edge of the middle column and the edge of the outer parent div. It should look like this.</p>
  
  <pre>
  -------------------------------------------------------------
  | Size: X        |     Variable Size   |           Size: X  |          
  -------------------------------------------------------------
  </pre>
  
  <p>I have tried a few different methods but none have worked. </p>
  
  <p>EDIT: To clarify I'm trying to achieve the effect of a header that is centered with two horizontal lines on either side of the text.</p>
  
  <p><a href="https://css-tricks.com/line-on-sides-headers/" rel="nofollow">https://css-tricks.com/line-on-sides-headers/</a></p>
  
  <p>I wanted to see if it was possible to do with three nested divs.</p>