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의 오른쪽에 위치하게 될것입니다.

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

출처: 네이버 블로그

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

 

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
Posted by 정망스
,


맨 위로
홈으로 ▲위로 ▼아래로 ♥댓글쓰기 새로고침