DIV+CSS는 일반적으로 사용되는 HTML 웹 페이지 레이아웃 코드입니다.

다음은 단일 행과 열의 인용문입니다.
본문 { 여백: 0px; 텍스트 정렬: 센터 }
#content { 여백-왼쪽:자동; 너비: 400px;

아래 두 행과 한 열은 인용문입니다.
본문 { 여백: 0px; 텍스트 정렬: 센터;}
#content-top { 여백-왼쪽:자동; 여백-오른쪽:자동;
#content-end {margin-left:auto; 여백-오른쪽:auto; 너비: 370px;}

아래 3개 행과 1개 열은 인용문입니다.
본문 { 여백: 0px; 텍스트 정렬: 센터 }
#content-top { 여백-왼쪽:자동; 너비: 400px;

#content-mid { 여백-왼쪽:자동; 여백-오른쪽:자동;
#content-end { 여백-왼쪽:자동; 너비: 400px;

다음은 한 줄과 두 열의 인용문입니다.
#bodycenter { 너비: 700px; 여백-오른쪽: 자동; 여백-왼쪽: 자동;오버플로: 자동;
#bodycenter #dv1 {float: 왼쪽;너비: 280px;}
#bodycenter #dv2 {float: 오른쪽;너비: 410px;}

아래의 두 행과 두 열은 인용문입니다.
#header{ 너비: 700px; 여백-오른쪽: 자동;여백-왼쪽: 자동;}
#bodycenter { 너비: 700px; 여백-왼쪽: 자동;

#bodycenter #dv1 { 부동: 왼쪽: 280px;}
#bodycenter #dv2 { 부동: 오른쪽; 너비: 410px;}

아래 3개의 행과 2개의 열은 인용 부분입니다.
#헤더{ 너비: 700px; 여백-오른쪽: 자동; 여백-왼쪽: 자동;
#bodycenter {너비: 700px; 여백-오른쪽: 자동; 여백-왼쪽: 자동;
#bodycenter #dv1 { 부동: 왼쪽; 너비: 280px;}
#bodycenter #dv2 { 부동: 오른쪽: 410px;}
#footer{ 너비: 700px; 여백-왼쪽: 자동;

절대 위치 지정이 포함된 단일 행 및 3개 열 다음은 인용문입니다.
#왼쪽 { 위치: 절대; 위쪽: 0px; 너비: 120px;
#중간 {여백: 20px 190px 20px 190px }
#오른쪽 {위치: 절대; 상단: 0px; 오른쪽: 0px;

플로트 포지셔닝 1
xhtml:
다음은 인용문입니다:
<div id="warp"> <div id="column"> <div id="column1">첫 번째 열입니다</div> <div id="column2">두 번째 열입니다</div> <div class="clear"></div> </div> <div id="column3">세 번째 열입니다.</div> <div class="clear"></div> </div>

CSS:
다음은 인용문입니다:
#wrap{너비:100%;자동;}
#열{ 부동:왼쪽 너비:60%;}
#열1{ 부동:왼쪽 너비:30%;}
#column2{ 부동소수점:오른쪽; 너비:30%;}
#열3{ 부동소수점:오른쪽; 너비:40%;}
.clear{ 클리어: 둘 다;}

플로트 위치 지정 2
xhtml:
다음은 인용된 부분입니다: <div id="center" class="column"> <h1>이것이 주요 내용입니다.</h1> </div> <div id="left" class="column"> <h2 >왼쪽 사이드바입니다.</h2> </div> <div id="right" class="column"> <h2>오른쪽 사이드바입니다.</h2> </div>

CSS:
다음은 인용문입니다:
본문 {여백: 0; 왼쪽 패딩: 200px; 오른쪽 패딩: 190px; 최소 너비: 240px;}
.column {위치: 상대;플로트: 왼쪽;}
#중심 {너비: 100%;}
#왼쪽 {폭: 180px; 오른쪽: 240px; 여백-왼쪽: -100%;}
#right {너비: 130px;여백-오른쪽: -100%;}

행 2개와 열 3개
xhtml: 다음은 인용된 부분입니다: <div id="header">여기 맨 위 행이 있습니다</div> <div id="warp"> <div id="column"> <div id="column1"> 여기가 첫 번째 행 한 열입니다</div> <div id="column2">두 번째 열입니다</div> <div class="clear"></div> </P> <P></div > <div id= "column3">세 번째 열입니다</div> <div class="clear"></div> </div>

CSS:
다음은 인용문입니다:
#헤더{너비:100%; 높이:자동;}
#wrap{너비:100%;자동;}
#열{ 부동:왼쪽 너비:60%;}
#열1{ 부동:왼쪽 너비:30%;}
#column2{ 부동소수점:오른쪽; 너비:30%;}
#열3{ 부동소수점:오른쪽; 너비:40%;}
.clear{ 클리어: 둘 다;}

세 개의 행과 세 개의 열
xhtml:
다음은 인용된 스니펫입니다. <div id="header">여기는 맨 위 행입니다.</div> <div id="warp"> <div id="column"> <div id="column1">여기는 첫 번째 열 </div> <div id="column2">두 번째 열입니다.</div> <div class="clear"></div> </div> <div id="column3">이것은 세 번째 열 </div> <div class="clear"></div> </div> <div id="footer">여기 맨 아래 행이 있습니다</div>

CSS:
다음은 인용문입니다:
#헤더{너비:100%; 높이:자동;}
#wrap{너비:100%;자동;}
#열{ 부동:왼쪽 너비:60%;}
#열1{ 부동:왼쪽 너비:30%;}
#column2{ 부동소수점:오른쪽; 너비:30%;}
#column3{ 부동:오른쪽; 너비:40%;}
.clear{ 클리어: 둘 다;}
#바닥글{너비:100%; 높이:자동;}