RyoSugimoto
10/14/2014 - 4:52 AM

ブラウザのウィンドウのサイズに応じて、幅が可変する、2カラムのリキッドレイアウトだが、サイドバーの幅は常に固定させる。

ブラウザのウィンドウのサイズに応じて、幅が可変する、2カラムのリキッドレイアウトだが、サイドバーの幅は常に固定させる。

liquid_2_columns.css
content_copyfile_download
#container {
	max-width: 960px;
}

#sidebar {
	float: left;
	position: relative;
	width: 210px;
	z-index: 1;
}

#main {
	float: right;
	margin-left: -250px;
	position: relative;
	width: 100%;
	z-index: 0;
}

#main-content {
	margin-left: 250px;
}
liquid_2_columns
content_copyfile_download
<div id="container">
	<!-- サイドバー（幅を固定） -->
	<div id="sidebar">

	</div>
	<!-- メインカラム（幅可変） -->
	<div id="main">
		<div id="main-content">

		</div>
     </div>
</div>