Layout with 3 columns with equal width doesn't render equally with Opera and Safari

[xenlong2]

I have a pretty straightforward page with a wrapper which contains 3 seciotns (float: left; width: 33.333%). \[code\]#wrapper{ position: relative; max-width: 960px; margin: 0 auto;}.row{ width: 100%; _height: expression(this.height > 384 ? 384: true); max-height: 384px; margin-bottom: 30px; overflow: hidden;} .row:after{ content: ""; display: table; clear: both;}.row .column{ float: left; width: 33.333%; height: 100%; line-height: 0; overflow: hidden;} .row .column .item { width: 100%; height: 50%; overflow: hidden;} \[/code\]Now I have them work perfectly with all browser except for Safari and Opera, after searching stack overflow and google a lot I found a couple of similar question without a real working solution...one guy was suggesting to have the third column float right and be 34% wide, while col one and two were 33% but that didn't worked out..there's still a super tiny pixel on the right..So basically it appears to be a rounding issue, I read about it a lot, but since I can't change the disign i was looking for a work around...Mi current solution is to avoid fluid design on safari/opera...but I'm definitely not proud of that..Here I trew html + css real quick:http://jsfiddle.net/ventie30/N9SFJ/Just to give you a few more info I have 3 rows and 3 columns, rows are separated by 40px.