title: Two background colors for layout with horizontally centered content
body: <p><img src="https://i.stack.imgur.com/vT6kR.png" alt="enter image description here">
  Referencing the diagram above, I would like to create the following webpage layout:</p>
  
  <ul>
  <li>column 1 and column 4 are fluid margins</li>
  <li>column 2 + column 3 = a fixed width container used to display content</li>
  <li>column 1 and column 2 are of the same background color</li>
  <li>column 3 and column 4 are of the same background color</li>
  </ul>
  
  <p>So far, I've tried using some <code>position:fixed</code> hacks for column 1 and column 4, but I hope there's a better way in achieving this. <a href="http://jsfiddle.net/wLe4bj40/" rel="nofollow noreferrer">My fiddle</a> </p>