2015/11/16追記
幅などの値に小数が出る場合は、IE旧バージョン以外ではcalc()を使用しましょう。
calc()についての詳細はこちらのページ
スマートフォンサイトを作成する場合、幅などの指定を固定幅で指定するのではなくパーセンテージで指定します。
そうすることで可変レイアウトに対応することができます。
そこで困ってしまうのは小数点の扱い方です。
どれもきっちり割り切れるものではありません。たとえば100を3等分すれば33.33333・・・となります。
この小数点の対応の仕方はブラウザによって変わります。
Safariは切り捨てが行われているようです。FirefoxとChromeは全体におさまるように自動調整されているようです。
この挙動は本を見ても、ネットを調べても見解がバラバラです。
仕方ないので自分で値を計算する仕組みを作成しました。
各ブラウザでどのような値に設定されるか確認してみるのがよさそうです。
次のサンプルは500pxの幅のナビゲーションにボタンが３つ並んでいます。各ボタンの幅をパーセンテージで設定するものです。
通常は3等分ですから33.333・・パーセントを指定すればよいのですが、各ブラウザで何ピクセルの扱いになるか確認するものです。
３つのボタンの幅の合計が500pxを超えるとカラム落ちします。また500pxに満たない場合は赤い背景がのぞくことになります。
FirefoxやChromeでは3つの合計が500pxを超えるにもかかわらずカラム落ちしない不思議な現象になります。
いろいろ確認をしてみてください。
