CSSで片方の幅が可変で、もう片方の幅が固定というタイプのカラムレイアウトを実装する方法を全4パターン紹介します。
対象ブラウザやOSなど環境によっては使えないものもありますが、全て同じ見た目(レイアウト)を実装することができます。

HTMLと実装イメージについて

紹介する方法はいずれも下記のようなHTMLを使用したものになり、ご覧のようにメイン・サイド・それらを括る親要素の3つのdiv要素で実装していきます。

<div class="wrapper">
  <div class="main">
    <!-- 可変 -->
  </div>
  <div class="side">
    <!-- 固定 -->
  </div>
</div>

実装イメージ

また、今回はこのイメージのようにdiv class="main"(青い背景色の領域)を可変、div class="side"(赤い背景色の領域)を固定にそれぞれする方法で、固定幅はいずれも300pxという内容になります。

float + negative margin

カラムレイアウトでよく使用されるfloatにネガティブマージンを組み合わせる方法です。 実装にはCSSを下記のように記述します。

.wrapper {
  overflow: hidden;
}
.main {
  float: left;
  width: 100%;
  margin-right: -300px;
  padding-right: 300px;
  box-sizing: border-box;
}
.side {
  float: right;
  width: 300px;
}

メイン要素にサイド要素の幅である300pxをネガティブマージンとして記述し、padding-rightにも同じ数値を指定します。
ここではメイン要素にpadding指定しているためbox-sizing: border-box;を記述していますが、メインの中にある要素でpaddingなど指定する場合はbox-sizingの記述は必要ありません。

float + calc

同じくfloatを使用する方法ですが、こちらはメイン要素の幅指定部分にcalcを使用します。
実装にはCSSを下記のように記述します。

.wrapper {
  overflow: hidden;
}
.main {
  float: left;
  width : calc(100% - 300px);
}
.side {
  float: right;
  width: 300px;
}

table

display: table;を用いる方法で、実装にはCSSを下記のように記述します。
サンプルコードにあるvertical-align: top;text-align: left;の記述はレイアウトを実装するために必要なものではないので、必要なければ削除して問題ありません。

.wrapper {
  display: table;
  width: 100%;
}
.main,
.side {
  display: table-cell;
  vertical-align: top;
  text-align: left;
}
.side {
  width: 300px;
}

flexbox

display: flexbox;を用いる方法で、実装にはCSSを下記のように記述します。

.wrapper {
  display: flex;
}
.main {
  flex: 1;
}
.side {
  width: 300px;
}

ひと通りのブラウザやデバイスにも対応となると、やはり「float + negative margin」か「table」を使ったほうが無難だと思いますが、割と最近のものだけで良いのであれば「float + calc」や「flexbox」などでも実装できるので、自分が使いやすいものを選んだり実装するデザインによって使い分けたりと選択肢が増えますね。

それぞれ実際の動きを確認したい場合は、以下デモページでご覧になれます。