Photo by Manuel Quiroga

簡単に出来そうで、あれ…？

リキッドレイアウトでページを作っていたら意外にも悩んでしまったのでメモ。
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>
</div>

CSS

#wrapper {
    height: 500px;
    min-width: 600px;
}
#main {
    height: 500px;
    width: 100%;//+
    float: left;//+
}
#content {
    background-color: #F60;
    margin-right: 200px;//+
    margin-left: 150px;//+
    height: 500px;
}
#left {
    background-color: #09F;
    float: left;//+
    margin-left: -100%;//+
    width: 150px;//+
    height: 500px;
}
#right {
    background-color: #0C3;
    float: left;//+
    margin-left: -200px;//+
    width: 200px;//+
    height: 500px;
}

抑えておく指定

大事なのは明滅している部分です。

• 3つのボックス全てにfloat: left;を指定
• #mainはwidth: 100%;
• #contentは左右のボックスの幅だけmarginを指定
• 左側のボックスはwidthとmargin-left: -100%;を指定
• 右側のボックスはwidthを指定し、widthと同じpx数をmargin-leftにマイナス値(=ネガティブマージン)で指定