title: How to fix Internet explorer 7 bug when using percentage widths for layout?
body: <p>Please help me in this. I need to create a layout using percentage widths. I have a wrapper that is 100% width.</p>
  
  <p>Now I have a DIV (the main wrapper.. I want to keep it at 94% width percentage.. 94% of 100% body).. okay fine</p>
  
  <p>So to make this simple.</p>
  
  <p>-> BODY 100% width set</p>
  
  <p>--> CONTAINER 94% width</p>
  
  <p>---> FIRST CHILD DIV 70% float left (70% of the CONTAINER)</p>
  
  <p>---> SECOND CHILD DIV 30% float right (30% of the CONTAINER)</p>
  
  <p>But I have 2 equal columns under FIRST CHILD DIV</p>
  
  <p>-----> 50% and 50% percentage width</p>
  
  <p>The bug is: In ie7.. the last column is displayed on bottom .. its not properly floated.. If i reduce the width to 29.9% !!! it works.. i think ie7 has bug in treating percentage widths or something.. Please clarify upon this. I hope you get the problem because the css / html is just too long.. i just hope its a common issue.. :(</p>
  
  <p>Here is the CSS for this DIV .. Hope that helps :)</p>
  
  <pre><code>body {
  width: 100%;
  background: #fff;
  text-align: center;
  font-size: 12px;
  }
  
  #wide-primary {
  background: #fff url(img/shadow1.png) repeat-x top;
  position: relative;
  top: -1px;
  }
  
  #primary {
  width: 94%;
  margin: 0 auto 0 auto;
  text-align: left;
  }
  
  #features {
  float: left;
  width: 70%;
  padding: 2% 0 0 0;
  }
  
  .featurebox {
  float: left;
  width: 48%;
  padding: 0 2% 3% 0;
  }
  
  #lastnews {
  float: right;
  width: 30%;
  padding: 2% 0 2% 0;
  }
  </code></pre>