リキッドと固定を組み合わせた2カラムレイアウト

2カラムのレイアウト作成

2カラムレイアウトで基本的なレイアウトを作成する例です。固定幅の場合と可変幅の場合、そして固定幅と可変幅の場合をそれぞれ紹介します。

固定幅の場合

これはfloatで2カラムにしたものです。ボックスモデルの計算を正しく行って作成するだけです。

サンプル
HTML

<div id="wrapper">
<h1>固定レイアウト</h1>
 <div id="main">
  <h2>メイン領域</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
 </div>
 <div id="sub">
  <h2>サブ領域</h2>
   <p>Lorem ipsum dolor sit amet,/p>
 </div>
</div>

CSS

#wrapper{
	width:900px;
	overflow:hidden;
	background-color:blue;
	margin:auto;
}
#main{
	float:left;
	width:600px;
	background-color:pink;
}
#sub{
	float:left;
	width:300px;
	background-color:yellow;
}

可変幅の場合

サンプル
可変幅の場合は幅の指定をパーセントに変更しただけです。
CSS

#wrapper {
	width: 100%;
	overflow: hidden;
	background-color: blue;
}
#main {
	float: left;
	width: 70%;
	background-color: pink;
}
#sub {
	float: left;
	width: 30%;
	background-color: yellow;
}

可変幅と固定幅混合の場合

うまくいかない例

サンプル
困るのはこのパターンです。
片一方を可変幅でパーセント指定して、もう片方を固定幅でpx指定した場合カラム落ちが発生します。
CSS

#wrapper{
	width:100%;
	overflow:hidden;
	background-color:blue;
}
#main{
	float:left;
	width:100%;
	background-color:pink;
}
#sub{
	float:left;
	width:300px;
	background-color:yellow;
}

解決策の例

サンプル
解決方法はいくつかあると思いますが、今回はネガティブマージンを使用した方法です。
右方向のネガティブマージンは自分自身は動かずに右隣のオブジェクトを引き込む性質があります。
これを利用して#subをその幅だけネガティブマージンで引っ張り込んでカラム落ちを防ぎます。
main領域にsubが引き込まれるためその分だけ余白が必要になります。そこでdiv#innerを用意して余白を作成します。
CSS

#wrapper {
	width: 100%;
	overflow: hidden;
	background-color: blue;
}
#main {
	float: left;
	width: 100%;
	background-color: pink;
	margin-right: -300px;
}
#inner {
	margin-right: 300px;
}
#sub {
	float: left;
	width: 300px;
	background-color: yellow;
}

HTML

<div id="wrapper">
<h1>可変レイアウト</h1>
 <div id="main">
  <div id="inner">
   <h2>メイン領域</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
  </div>
 </div>
 <div id="sub">
  <h2>サブ領域</h2>
   <p>Lorem ipsum dolor sit amet,/p>
 </div>
</div>