CSS, 가변폭 본문과 고정폭 사이드바

고정 폭 블럭과 가변 폭 블럭을 좌우로 float하여 가로로 배치할 때, 예를 들어 블로그의 본문과 사이드바에서, 본문은 가변폭으로 하고 싶고, 사이드바는 고정 폭으로 하고 싶을 때, 사이드바의 폭이 200px로 고정되어 있는 상태에서 본문의 폭을 브라우저 창의 최대 폭에서 200px만큼 뺀 크기로 해서 배치하고 싶다. 그런데 css에서 width: 100% - 200px 처럼 산술식은 지원하지 않는다. 이것을 margin값에 음수를 줘서 구현할 수 있다.

html:
<div id="contentsWrapper">
<div class="content"></div>
<div class="content"></div>
</div>
<div id="sidebar"></div>

content는 각각의 포스트 본문이고 sidebar는 사이드 바 영역 이다. contentsWrapper는 본문들을 감싸는 엘리먼트이다.

contentsWrapper에는 width: 100%와 margin-right: -200px를 준다. 그러면 contentsWrapper는 웹 브라우저 창 폭(또는 상위 엘리먼트의 폭)만 큼의 너비를 가진다. 오른쪽 여백이 -200px이므로 폭 200px짜리 sidebar가 올 수 있다. contentsWrapper에 float: left, sidebar에 float: right를 준다. 오른쪽 200px이 contentsWrapper와 sidebar가 겹친 상태이다.

이러면 content의 일부는 sidebar가 덮어버린 상태이다. 여기서 content에 margin-right: 200px를 준다. 그러면 포스트 본문이 가변폭을 지원하면서 sidebar와 사이좋게 공간을 나누어 쓴다.

css:
#contentsWrapper {
	float: left;
	width: 100%;
	margin-right: -200px;
}

.content {
	margin-right: 200px;
}

#sidebar {
	width: 200px;
	float: right;
}

여백을 좀 더 추가해서 다음과 같은 디자인이 나올 수 있다.

폭이 넓은 해상도

중간 폭 해상도