【cssレイアウト】2カラム固定+可変と3カラム固定+可変の方法

ブラウザの幅を変えたときにすべてのコンテンツが可変になるのではなく固定+可変のレイアウトにする方法を紹介します。

たとえばブラウザの幅を小さくしていくと左のコンテンツが固定で右のコンテンツが小さくなっていくイメージです。

また逆としてブラウザの幅を広げると左のコンテンツが固定で右のコンテンツがどんどん広がっていく形です。

2カラムで固定+可変のパターン

html

<div id="container">
	<div id="main">
		<div id="contents">
			<div class="section">コンテンツ部コンテンツ部コンテンツ部コンテンツ部コンテンツ部コンテンツ部コンテンツ部コンテンツ部コンテンツ部コンテンツ部コンテンツ部コンテンツ部</div>
		</div>
		<div id="sidebar2">右サイドメニュー</div>
	</div>
</div>

css

#container{
	width: 100%;
	margin: 0 auto;
}

#main{
	width: 100%;
	float: right;
	margin-left: -180px;
}

#contents{
	width: 100%;
	height:600px;
	background:#ddd;
	float: left;
	margin-right: -180px
}

.section{
	min-width:100px;
	height:600px;
	background:#333;
	position: relative;
	margin-right:200px;
	padding: 0;
}

#sidebar2{
	width: 180px;
	height:600px;
	background:#888;
	float: right;
}

サンプル

3カラムで固定+可変のパターン

次は3カラムで左右が固定幅で中央の可変のパターンになります。

<div id="container">
	<div id="main">
		<div id="contents">
			<div class="section">コンテンツ部コンテンツ部コンテンツ部コンテンツ部コンテンツ部コンテンツ部コンテンツ部コンテンツ部コンテンツ部コンテンツ部コンテンツ部コンテンツ部</div>
		</div>
		<div id="sidebar1">左サイドメニュー</div>
	</div>

	<div id="sidebar2">右サイドメニュー</div>
</div>

css

#container{
	min-width:950px;
	max-width:1200px;
	width: 100%;
	margin: 0 auto;
}

#main{
	width: 100%;
	float: left;
	margin-right: -180px;
}

#contents{
	width: 100%;
	height:600px;
	background:#ddd;
	float: right;
	margin-left: -180px
}

.section{
	height:600px;
	background:#333;
	position: relative;
	margin: 0 200px;
	padding: 0;
}

#sidebar1{
	width: 180px;
	height:600px;
	background:#888;
	float: left;
}

#sidebar2{
	width: 180px;
	height:600px;
	background:#111;
	float: right;
}

サンプル