title: css four-column left floated layout with equal left and right margins
body: <p>I have a four-column, left-floated layout. I want equal margins for left and right margins.  I've floated the four columns to the left and assigned a right margin of 20px on each float.  The full width column div looks correct, but the margins and columns are not displaying correctly on the columns with different widths.  I've gone over the math several times and my eyes are burning trying to figure out what I'm doing wrong.</p>
  
  <p>Any suggestions on the best way to do this or how to do this?  I could create a 20px width first column for a total of five columns, or use tables.  But I was looking for a more elegant way of doing this, but maybe it's not possible.  I also have to support IE7.  Thanks.</p>
  
  <p><a href="http://jsfiddle.net/Chris22/w3YRF/1/" rel="nofollow">Code here - 4 column margins not correct</a></p>