ヨモツネット【display : inline-block をつかったレイアウト】

自分なりに試してみました。
»デモページ

上下中央揃え、全体のセンタリングの際に付け足すクラスとかもくっつけて、使うときのスタンバイもさせてみました。（早い話が、自分専用inline-blockセットって感じです。使う気満々ですｗ）

■HTML

<div class="blockContainer"><!--
--><div class="block"><div>

ここに中身を書きますここに中身を書きますここに中身を書きます

</div></div><!--
--><div class="block"><div>

ここに中身を書きますここに中身を書きますここに中身を書きます

</div></div><!--
--><div class="block"><div>

ここに中身を書きますここに中身を書きますここに中身を書きます

</div></div><!--
--><!-- ///End blockContainer --></div>

■CSS

@charset "shift_jis";
/* ------------------------------------------------------
inline-block
------------------------------------------------------ */
div.blockContainer{
width:900px; /* ブロック全体の幅 */
border:5px solid #ccc; /* ブロック全体のボーダー */
}
div.block {
width:250px; /* 1ブロックの幅（下記も同様） */
border:3px solid #000; /* 1ブロックのボーダー */
margin:10px; /* 1ブロックの周囲との距離 */
background:#ddd; /* 1ブロックのBOXの色 */
text-align:left;
vertical-align:top;
display:-moz-inline-box;/* For Firefox 2↓ */
display:inline-block;
/display:inline; /* For IE 5↑、7↓ */
/zoom: 1; /* For IE 5↑、7↓ */
}
div.block > div{ /* For Firefox 2 ↓ */
width:250px; /* 1ブロックの幅 */
display:block;
}
/* ブロックをセンタリングする場合.blockContainerと同じ位置につける */
div.center { text-align:center;}

/* 1ブロックに対して上下中央・上・下揃えする場合.blockと同じ位置につける */
div.middle { vertical-align:middle;}
div.bottom { vertical-align:bottom;}

/* ------------------------------------------------------
// inline-block
------------------------------------------------------ */