簡単に出来そうで、あれ…? リキッドレイアウトでページを作っていたら意外にも悩んでしまったのでメモ。 floatでボックスを3つ横に並べる時、左右のボックスは固定幅にし、真ん中のボックスは残った幅いっぱいに広がってほしい時のCSS。 例:http://blog.material-being.com/examplehtml/3columnliquid.html 表示してウィンドウの幅を変えてみて下さい。 作り方 HTMLはこんな感じ。中央のボックス(=つまり残りの幅いっぱいに広げたいボックス)を1個余分に囲ってやるのがポイント HTML <div id="wrapper"> <div id="main"> <div id="content">#content</div> </div> <div id="left">#left</div> <div id="right">#right</div