Three column fluid css

I am building a prototype mobile web application and trying to get 3 fluid but "equal" columns using just css, I have made the assumption I can use 33% on two columns and 34% on the last column. However this doesn't equal 100%... Any ideas?

/* basic reset */
*, html, body {
  margin: 0;
  padding: 0;
  border: 0;
}

html, body, #container {
  width: 100%;
  height: 100%;
}

/* layout */
#container {
  background-color: red;
}

.column_one, .column_two {
  float: left;
  width: 33%;
  background-color: lime;
}

.column_three {
   float: left;
   width: 34%;
   background-color: aqua;
}

Basic maths tells me that 33 + 33 + 34 = 100 however in Chrome (Desktop) and Safari (iPhone 4 iOS5) I get some left over container div backgroun开发者_StackOverflowd colour.

This seems to be a bug with webkit since firefox can render this correctly.

Can anyone recommend a solution or is anyone else experiencing this problem?

Make column_three float to the right. That seems to solve this problem.

.column_three {
   float: right;
   width: 34%;
   background-color: aqua;
}

Btw, a very interesting note, i've done this a couple of times but never noticed the small gap, probably because i use Firefox most of the time.