CSS레이아웃-플로트를 이용한 2단 레이아웃

플로트를 이용한 간단한 2단 레이아웃을 만들어 보도록 하겠습니다.

구조는 아래 이미지를 참고해 주세요.

이번 레이아웃을 만들기 위한 CSS는 아주 간단합니다.

각 단에 원하는 너비값을 지정하고 네비게이션은 왼쪽으로 본문 영역은 오른쪽으로 플로트를 지정하면 됩니다.

레이아웃	스타일
<div id=wrapper> <div id=mainNav></div> <div id=content></div> <div id=clear></div> </div>	#content { width:700px; float:right;} #mainNav{ width:200px; float:left;} #clear{clear:both;}

푸터가 확실히 이 두개의 플로트 아래에 오도록 하기 위해서 푸터에는 플로트 해제해야합니다.

만약 플로트해제를 하지 않는다면 푸터는 content의 오른쪽에 위치하게 될것입니다.

이렇게 기본적인 레이아웃이 완성되었습니다.

출처: 네이버 블로그

주소: http://baraem2005.blog.me/20169490375