title: IE7 CSS width:100% issue
body: <p>I'm working on a CSS template for a responsive %-based grid. I had it working with IE7 earlier and did something stupid, I guess, and now it's not working.</p>
  
  <p><a href="http://danmathisen.com/lightbase-css/" rel="nofollow">http://danmathisen.com/lightbase-css/</a></p>
  
  <p>How it currently works:</p>
  
  <p>Columns are percent based. So a 1/3 width column (<code>.col-1-3</code>) will be <code>width:32%</code> + <code>margin-left:1%</code> + <code>padding:1%</code>. This is heavily based on Chris Coyier's <a href="http://css-tricks.com/dont-overthink-it-grids/" rel="nofollow">Don't Overthink It Grids</a>.</p>
  
  <p>In modern browsers, the padding doesn't affect the div width. But in IE7 it does. So I have IE classes (<code>.lt-ie8</code>) that accomodate for the 1% padding. <code>.lt-ie8 .col-1-3 { width: 30%; }</code>. So 30% width + 1% margin-left + 2% padding left/right * 3 - 1% :first-child = 100%. Right?
  Why doesn't that work in IE7?</p>
  
  <p>Solutions:</p>
  
  <p>I can use <code>behavior: url(/scripts/boxsizing.htc)</code> but hope to make this workable without.</p>
  
  <p>Or use JS to calculate the width then subtract 1px. I think that would work, but it's not ideal.</p>
  
  <p>Or settle with 99% width. Also not ideal.</p>
  
  <p>I'd love a CSS-only solution. Any thoughts?</p>