728x90
플로트를 이용한 간단한 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의 오른쪽에 위치하게 될것입니다.
이렇게 기본적인 레이아웃이 완성되었습니다.
출처: 네이버 블로그
728x90
'CSS' 카테고리의 다른 글
| 익스플로어 6에서 png파일 투명하게 보이기 (0) | 2013.01.08 |
|---|---|
| CSS 스타일시트 속성정리 (0) | 2013.01.08 |
| CSS 레이아웃-중간 정렬하기 (0) | 2013.01.08 |
| CSS로만 만드는 툴팁 (0) | 2013.01.08 |
| CSS 링크 스타일 (0) | 2013.01.08 |
