2カラムのスマホサイトで片側だけ可変の横幅にする方法

レスポンシブサイトではwidthをパーセントで指定することは珍しくありません。ですがどうしても片側だけ横幅をピクセルで指定して、残りの領域は自動で埋まるように使いたい、そう思ったことはありませんか？

今回はそんなときに使えるcssサンプルです。
レスポンシブサイトで左右に振ったサムネイル画像の横に注釈テキストを回りこませたい、そんなときに使えるサンプルとなっています。

See the Pen jrqwWY by hoshu_t (@hoshu_t) on CodePen.

固定するdivにはwidthをpxで指定し、可変するdivにはwidth100%を指定します。
可変するdivに、固定するdivのwidth分、-(マイナス)のmargin-leftを指定します。
同じく可変するdivに、固定するdivのwidth分のpadding-leftを指定します。
同じく可変するdivに、box-sizing:border-box;を指定します。

知らないと意外と思いつかない方法かもしれません。覚えておくと便利です。