2カラム(左可変・右固定)レイアウトをbox-sizingで実現

左カラムはブラウザの表示幅に合わせて可変するリキッドレイアウト。右カラムは180pxの固定幅の2カラムレイアウトをbox-sizingを使用して作ってみます。

右カラムにサイズの決まった広告を使用する場合などに使えるレイアウトです。

デモ

ブラウザ幅を狭くすれば、左カラムの幅が変わります。
 

左カラムです。
モニターに合わせた可変幅となります。

コード

HTML

<div id="l_wrapper" class="clearfix">
    <div id="l_left">
        <div id="l_content">
            <p>左カラムです。モニターに合わせた、可変幅となります。</p>
        </div>
    </div>
    <div id="l_right">
        <p>右カラムです。180pxの固定幅となります。</p>
    </div>
</div>

CSS

#l_wrapper {
    width: 100%;
}

#l_left {
    float: left;
    width: 100%;
    padding-right: 200px;
    box-sizing: border-box;
}

#l_right {
    float: right;
    width: 180px;
    margin-left: -200px;
    background: #FCC;
}

#l_content {
    background: #AAA;
}

.clearfix {
  overflow: hidden;
  zoom: 1;
}

.clearfix:after {
  content: '';
  display: block;
  clear: both;
}
CONTENTS
  1. デモ
  2. コード
    1. HTML
    2. CSS