css - Three column fluid css

Question

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 background 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?

Answer 1

使 column_three 向右浮动。这似乎解决了这个问题。

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

顺便说一句，一个非常有趣的注释，我已经这样做了几次，但从未注意到小的差距，可能是因为我大部分时间都使用 Firefox。