NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

サイドカラムの幅を固定したままウィンドウ幅に応じてメインカラムを可変させる

2014年7月23日CSSテクニック

サイドカラムの幅を固定したままウィンドウ幅に応じてメインカラムを可変させる

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

デモページ

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;
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. サイドカラムの幅を固定したままウィンドウ幅に応じてメインカラムを可変させる

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com