display:tableが便利

display:tableという、cssのプロパティがあります。
要素を擬似テーブルにすることができるというもので、こんなふうに使います。

<div style="display:table;">
  <div style="display:table-cell;">左</div>
  <div style="display:table-cell;">中央</div>
  <div style="display:table-cell;">右</div>
</div>

floatでも同じことができますが、display:tableのほうがだいぶ楽です。
崩れとかあまり気にしなくてよくなるし、cssの記述量もかなり減ると思います。


さらにwidth:100%とかvertical-alignとかも使えるのでかなり柔軟にレイアウトできるようになります。

例えばこんなのとか。

<div style="display:table;width:500px;">
  <div style="display:table-cell;background-color:orange;padding:10px;">左<br>左<br>左<br>左<br>左</div>
  <div style="display:table-cell;background-color:limegreen;width:100%;padding:10px;vertical-align:middle;text-align:center;">中央</div>
  <div style="display:table-cell;background-color:yellow;vertical-align:bottom;padding:10px;">右</div>
</div>

左
左
左
左
左

中央

右

各ブラウザの対応状況はこちらを参照。

http://fmbip.com/litmus/


気になるのはieの対応状況ですが、8以降は対応してるようです。

そろそろie7も切り捨てられる頃合いだと思うので、pcサイトでも今後は利用する機会が増えてくるんじゃないでしょうか。

自分はガンガン使っていこうと思ってます。