3カラム流体CSS

Question

私はプロトタイプのモバイルウェブアプリケーションを構築しており、3つの流体を得ることを試みていますが、単にcssを使用して「等しい」カラムを使用しようとしています。 。しかし、これは100％と同じではありません...任意のアイデア？

/* 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; 
} 

基本的な数学は、しかし、33 + 33 + 34 = 100クローム（デスクトップ）とSafari（iPhone 4 iOS5を）で、私はいくつかは、コンテナのdivの背景色の上に残され得ることを私に伝えます。

これは、Firefoxがこれを正しくレンダリングできるので、Webkitのバグだと思われます。

解決方法をお勧めする人はいますか？この問題が発生している人は誰ですか？

Answer 1

column_threeを右側に浮かしてください。それはこの問題を解決するようです。ところで

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

、非常に興味深いノート、私は時間のFirefoxのほとんどを使用し、おそらくので、数回これを行ったが、小さなギャップに気づいたことがありません。