片方だけ可変(リキッド)にするレイアウト

サンプルを用意してありますが、幅を狭めると可変のブロックも一緒に狭まっていきます。組み方はとても簡単です。

例えば幅250pxのサイドカラムと幅100%のメインカラムがあるとします。横並びにすると100%+250pxなので、250pxオーバーしてしまいますよね。なので、メインカラムから幅250pxをネガティブマージンしてあげます。その後、中にあるcontentにマージンでサイドカラム幅以上の指定をするだけ。
1448-01

以下にコードをまとめましたので、サンプルと合わせて見比べてみてください。

左サイド:固定、右メイン:可変

HTML

<div id="wrap">
	<div id="main">
		<div id="content">メイン:可変</div>
	</div>

	<div id="side">左:固定</div>
</div>

CSS

#wrap {
	border: 1px solid #c00;
	overflow: hidden;
}
#main {
  float: right;
  width: 100%;
  margin: 0 0 0 -250px;
}
#side {
  float: left;
  width: 250px;
  background: #ddd;
}
#content {
  margin: 0 0 0 270px;
  background: #ccc;
}

続いて、上記とはサイドとメインのカラムを逆にした場合のコードです。

左メイン:可変、右サイド:固定

HTML

<div id="wrap">
	
	<div id="main">
		<div id="content">メイン:可変</div>
	</div>
	
	<div id="side">右:固定</div>
</div>

CSS

#wrap {
	border: 1px solid #c00;
	overflow: hidden;
}#main {
  float: left;
  width: 100%;
  margin: 0 -250px 0 0;
}
#side {
  float: right;
  width: 250px;
  background: #ddd;
}
#content {
  margin: 0 270px 0 0;
  background: #ccc;
}

※表示確認用にwrapに赤枠線を指定してありますので不要の場合はborderの指定は削除してください