http://www.xeschool.com/xe/bluenote_1_06

Float 속성 : 자기 자신의 위치를 주변의 콘텐츠로부터 상대적으로 배치하는 속성

본문 내용(content)을 감싸는 DIV#contentwrap 안에 2개의 기본 컬럼(Column)을 나누고 하나는 로그인 위젯과 서브메뉴 등을 담는 사이드바(sidebar) 영역을, 또 다른 하나는 XE의 페이지, 외부페이지, 게시판 모듈과 같은 내용을 담을 DIV#content를 만들어야 합니다. 물론 한개의 컬럼만 필요한 경우도 있습니다. 아래 그림처럼 싸개(Wrapper) 역할을 하는 #contentwrap 안에 DIV 하나만을 두고 내용 변수를 넣어두면 쉽고 간단하게 레이아웃을 만들 수 있겠지요. 하지만 두개 이상의 컬럼을 2단 또는 3단으로 배치하는 것은 그리 만만치 않습니다. 과거 HTML4 시절의 TABLE 태그를 이용하게 되면 무척 간단하게 셀(TD)을 나누는 것만으로도 다단 구성이 적용 되었지만, DIV는 블록요소입니다. 옆에 다른 누가(요소) 붙어 있는 것도 싫어하고 누구든지 자신보다 아래쪽으로 내려가야 직성이 풀리는 녀석입니다...^^