サイドバーを固定サイズにしてメインカラムを可変にする方法

サイドバーを固定化してメインカラムを可変にしようと思い、cssでのやり方がわからなかったのでjavascriptで実装していました。
画面幅を取得して、そこから固定divの幅と間に取りたいマージンを引いて、メインカラムの幅にする。みたいな処理をしていたのですが、
cssで実装できるようなのでまとめてみました。

javascriptでも数行で実装できますが、ブラウザ上で画面幅を変えたときにリロードしないとカラムが落ちてしまうということと、
cssでの実装が思ったよりも簡単だったのでcssで実装する事をお勧めします。

文章でまとめると

• 固定する方のdivはwidthをpxで指定する (width: 300px)
• 可変する方のdivはwidthを100%にして固定するdivの幅のネガティブマージンを指定（margin-right: -300px）
• 可変する方のdivの内側にdivを作り、固定するdivの方に固定するdivの大きさ分marginをとる（margin-right: 300px）
  ※（）の中は固定する幅を300pxにした場合。

コードの例

文章だとわかりにくいところもあると思うので、コードも書いておきます。

例）左側にサイドカラムを作りwidthを280pxにして、メインカラムを可変にする場合

HTML

<div class="wrap">
	<div class="main">
		<div class="main_inner">
			<!-- メインカラムの内容 -->
		</div>
	</div>
	<div class="side">
		<!-- サイドカラムの内容 -->
	</div>
</div>

CSS

.main {
	margin-right: -280px;
	width: 100%;
	float: left;
}

.main .main_inner {
	margin-right: 280px;
}

.side {
	width: 280px;
	float: right; /* leftでも可 */
}

メインカラムとサイドカラムの間の幅とか、画面端とカラムの間とかを調整しながら実装してください。
基本的に.mainのmargin-rightと.main .main_innerの値を大きくするとメインとサイドの間が空きます。

まとめ

みそはネガティブマージンを取ってそこに固定divを入れるところと、可変divの中にもう一つdivを作るところかなーって思います。
意外と簡単に実装できたので今後も使っていこうと思います。