Please help me in this. I need to create a layout using percentage widths. I have a wrapper that is 100% width.

Now I have a DIV (the main wrapper.. I want to keep it at 94% width percentage.. 94% of 100% body).. okay fine

So to make this simple.

-> BODY 100% width set

--> CONTAINER 94% width

---> FIRST CHILD DIV 70% float left (70% of the CONTAINER)

---> SECOND CHILD DIV 30% float right (30% of the CONTAINER)

But I have 2 equal columns under FIRST CHILD DIV

-----> 50% and 50% percentage width

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.. :(

Here is the CSS for this DIV .. Hope that helps :)

```
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;
}

```