レスポンシブ・ウェブデザインをする時、ウィンドウ幅に応じてサイドカラムの幅は固定したまま、メインカラムの幅だけ可変させます。

デモページ

HTML

<div id="contents">
	<div id="main">main</div>
	<div id="side">side</div>
</div>

CSS

#contents {
	max-width: 1280px;
	min-width: 640px;
	height: 360px;
	box-sizing: border-box;
	margin: 0 auto;
	padding-right: 320px;
}
#contents:after {
	display : table;
	clear : both;
	content : '';
}
#main {
	width: 100%;
	background-color: #ffffff;
	float: left;
	height: 100%;
}
#side {
	width: 320px;
	height: 100%;
	margin-right: -320px;
	float: right;
	background-color: #52d3ff;
	color: #ffffff;
}

デモページ