Percentage padding/width off in safari - css

Question

I'm trying to create a fluid grid layout with different columns. I have one wrapper with 2 50% columns and one wrapper with 4 25% columns. This is working well in all browsers exept safari there is a tiny gab (1 pixel?) after the last column. After adding margin and padding its getting worse, the gab is much bigger and different width when resizing the browser.
I can't find what is causing this behaviour, what am I doing wrong here??
The HTML:
<div id="column2">
<div class="left">left</div>
<div class="right">right</div>
<div class="clear"></div>
</div>
<div id="column4">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="clear"></div>
</div>
CSS (I left out the reset css it's included in the fiddle):
#column2 {
width:84%;
height:auto;
padding-left:8%;
padding-right:8%;
margin-left:auto;
margin-right:auto;
background-color:#FFFFCC;
}
.left {
float:left;
width:50%;
height:100px;
background-color:#FFFF66
}
.right {
float:left;
width:50%;
height:100px;
background-color:#FF9900;
}
#column4 {
width:84%;
height:auto;
padding-left:8%;
padding-right:8%;
margin-left:auto;
margin-right:auto;
background-color:#66FFFF;
}
#column4 .box1, #column4 .box2, #column4 .box3, #column4 .box4{
float:left;
width:22.25%;
height:100px;
padding-left:1%;
padding-right:1%;
margin-left:1%;
}
#column4 .box1 {
background-color: #FF3300;
margin-left:0;
}
.box2 {
background-color: #333399;
}
.box3 {
background-color: #3366FF;
}
.box4 {
background-color: #009900;
}
.clear {
clear:both;
}
I've setup a quick basic fiddle here: http://jsfiddle.net/emmetje/7ttsE/2/
Many thanks in advance for your help!

Answer 1

its not working 100%
but this better : http://jsfiddle.net/7ttsE/4/
<div id="column2">
<div id="spaces">%8</div>
<div class="left">left</div>
<div class="right">right</div>
<div id="spaces">%8</div>
<div class="clear"></div>
</div>
<div id="column4">
<div id="spaces">%8</div>
<div class="box1">box1</div>
<div id="margin"> </div>
<div class="box2">box2</div>
<div id="margin"> </div>
<div class="box3">box3</div>
<div id="margin"> </div>
<div class="box4">box4</div>
<div id="spaces">%8</div>
<div class="clear"></div>
</div>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
#spaces {
width:8%;
float:left;
}
#margin {
float:left;
width:1%;
}
#column2 {
width:100%;
height:auto;
margin-left:auto;
margin-right:auto;
background-color:#FFFFCC;
}
.left {
float:left;
width:42%;
height:100px;
background-color:#FFFF66
}
.right {
float:left;
width:42%;
height:100px;
background-color:#FF9900;
}
#column4 {
height:auto;
margin-left:auto;
margin-right:auto;
background-color:#66FFFF;
}
#column4 .box1, #column4 .box2, #column4 .box3, #column4 .box4{
float:left;
width:20.25%;
height:100px;
}
#column4 .box1 {
background-color: #FF3300;
margin-left:0;
}
.box2 {
background-color: #333399;
}
.box3 {
background-color: #3366FF;
}
.box4 {
background-color: #009900;
}
.clear {
clear:both;
}