Three columns with 33% width and margins/padding. Why is last column breaking?

[drak0n]

Am trying to give width of the page in %.So i tried the following code\[code\]<div id="mainContent" style="height: 350px"> <div class="grid4"> </div> <div class="grid4"> </div> <div class="grid4"> </div> </div>\[/code\]and Grid4 css below\[code\].grid4{ Width: 33%; float:left;} \[/code\]and the Main Content width in \[code\]100%.\[/code\]Now i am trying to give \[code\]padding or margin in percentage\[/code\] for any of the \[code\]grid4\[/code\] it is pushing the next Div one down.What property should i be using to give inner padding for Width ?Thanks