2단 레이아웃 clear 시키기

mission
가로 사이즈 780px에 사이드바를 왼쪽에 정렬 시키고 아랫쪽에 footer를 위치시키기. 

width: 200px;
먼저 사이드바의 가로 사이즈를 지정합니다.

float: left;
sidebar를 왼쪽에 위치시키기 위하여 float 속성을 left로 주고 내용을 왼쪽에 흐르게 합니다. 그럼 컨텐츠 영역 왼쪽에 사이드바가 위치하는걸 볼 수 있습니다.

clear: both;
단 사이드 바의 높이가 컨텐츠 높이보다 클 경우 footer역시 sidebar 오른쪽에 위치하게 됩니다. [보기]
이럴경우를 위하여 footer에 장치를 해줘야 하는데 clear속성을 이용하여 아까 사이드바를 왼쪽에 위치시킨 속성을 해제하기 위하여 clear을 이용합니다.

 

 

---

sample : http://jsfiddle.net/2Y5nx/2/

html

<div class="wrap">
    <div class="header">
        header
    </div>
    <div class="sidebar">
        sidebar  
    </div>
    <div class="content">
        content
    </div>    
    <div class="footer">
        footer
    </div>
</div>

css

.wrap {
    width: 780px;
    font-size:0.75em;
}
.sidebar {
    width: 200px;
    float:left;
}
.footer {
    clear: both;
}