title: css - bi-color, flexible, horizontal background "band"
body: <p>I'm pretty familiar with sites that require "horizontal bands" on their code - even if their content is fixed within the 960px, their backgrounds "extend" to the left and right.</p>
  
  <p>I know how to do those, if they have one single color, or one single image that I can use as background.</p>
  
  <p>Recently a client required one of such bands, with a couple special requirements:</p>
  
  <ul>
  <li>The band has to be one color on the right and one color on the left</li>
  <li>The colors are programmable; they change depending on the content type</li>
  </ul>
  
  <p>I initially thought about creating background images with all the possible two-color combinations, but the system should basically allow for any two-colors. The color thus have to be specified in html/css not images.</p>
  
  <p>I've tried for a while and so far this has been my best effort:</p>
  
  <p><a href="http://jsfiddle.net/WENu3/" rel="nofollow">http://jsfiddle.net/WENu3/</a></p>
  
  <p>There are several things that I don't like about this setup:</p>
  
  <ul>
  <li>The container <em>must</em> have a fixed height. Otherwise the left and right bands collapse. I'd rather have the height of the whole thing defined by the content of text.</li>
  <li>I have to add <code>height: 100%</code> to all divs inside container. I'd rather only have to specify that on the bands.</li>
  <li>I feel I need too many divs. In particular, I'm not sure about "content" div is needed.</li>
  <li>There is a 1-pixel difference at the bottom (Chrome and Firefox). I don't know why it happens and I don't know how to fix it.</li>
  </ul>
  
  <p>Is there a more elegant solution to this problem?</p>