レスポンシブ2カラムレイアウトにおいて、片側の幅はピクセル固定でもう片側は残ったスペースに対して100%にしたい時があります。マイナスマージンとパティング、box-sizingを使用してエクセレントに処理しましょう

HTML

<div class="wrap">
    <div class="left">左側のコンテンツ 200px 固定</div>
    <div class="right">右側のコンテンツ 余ったスペースに対して100%</div>
</div>

CSS

.left {
    position: relative;
    float: left;
    width: 200px;
}
.right {
    float: left;
    width: 100%;
    margin: 0 0 0 -200px;
    padding: 0 0 0 200px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

解説

右ブロックは幅が 100% ですが、左端に左ブロックと同じ値のマイナスマージンを持たせています。このためすっぽりとスペースにはまることができます。 また、パディングで同値を左端に持たせて左ブロックの表示位置を確保します。ただしパディングを持つと幅100%よりも膨らんでしまうため、box-sizing: border-box; で100%に保たせます。

.left の position: relative; は .right のしたに潜り込んでしまうのを防ぐためです。 .right にも position: relative; が入る時は z-index で調整してください。

float でなく、inline-block でも対応可能です。ラッパー要素に letter-spacing: -.4em; などとして左右のブロックにスペースがあかないようにしてください。