片方が固定、片方が可変のレスポンシブレイアウトのCSS設定方法

レスポンシブデザインで左側の要素の横幅だ固定、右側がブラウザの横幅によって可変するときのCSSの設定方法です。

下記は、左側の要素が300px、右側の要素が、可変で作成するときのcssの指定です。

 

html

<div class="wrapper">
	<div class="side">
		<!-- 固定 -->
	</div>
	<div class="main">
		<!-- 可変 -->
	</div>
</div>

 

css

.wrapper {
	overflow: hidden;
}
.main {
	float: right;
	width: 100%;
	margin-right: -300px;
	padding-right: 300px;
	box-sizing: border-box;
}
.side {
	float: left;
	width: 300px;
}

-WEB