display: table

たとえば

-----
《HTML》

<div>
    <p class="left">ひだり</p>
    <p class="main">まなか</p>
    <p class="right">みぎ</p>
</div>

《CSS》
div {
    display: table;
    width: 600px;
}
p {
    display: table-cell;
}

.left {
    width: 100px;
}
.right {
    width: 150px;
}

-----
とすると、
幅600pxのdivの中に、

<100px幅の左><(600 - (100 + 150)=)350px幅の真ん中><150px幅の右>

が横並びになる。

【対応ブラウザ】

* * *
参考:
http://ib-ennoshita.jp/2008/04/24-ogawa.html
http://w3g.jp/css/display_position/display
最終更新:2011年11月28日 10:49