Html

float 요소를 이용한 레이아웃

SECTION 영역

							
<div id="header">
<h2>HEADER 영역</h2>
</div>
<div id="nav">
<h2>NAV 영역</h2>
</div>
<div id="section">
<p>SECTION 영역</p>
</div>
<div id="footer">
<h2>FOOTER 영역</h2>
</div>
							
						
						
.cf:after{
	clear: both;
    display: block;
    content: '';}

.cont_inner .con{
	width:100%;
    margin-top: 10px;
    padding: 20px;
    background: #eee;
}
.tabConArea .tabCont {
    margin-top: 20px;
    padding: 20px;
    background: #fff;
}
.cont_inner #tab01 .tabHgroup > h1 {float: left; padding:20px 20px}
.tabConArea #tab01_01 #header{
	background:#dddddd; width:100%; height:100px; line-height:100px;
}
.tabConArea #tab01_01 #nav{
	background:#ff7396; width:20%; height:300px; float:left;line-height:300px;
	
}
.tabConArea #tab01_01 #section{
	background:#73dcff; width:80%; height:300px; float:right;line-height:300px;
}
.tabConArea #tab01_01 #footer{
	background:#dddddd; width:100%; height:100px; clear:both; line-height:100px; 
}
#tab01_01{ text-align:center; }
					
					

inline 요소를 이용한 레이아웃

HEADER 영역

SECTION 영역

FOOTER 영역

							
<header>
<h2>HEADER 영역</h2>
</header>
<nav>
<h2>NAV 영역</h2>
</nav>
<section>
<p>SECTION 영역</p>
</section>
<footer>
<h2>FOOTER 영역</h2>
</footer>
							
						
							
.cont_inner #tab02 .tabHgroup > h1 {float: left; padding:20px 20px}

.tabConArea #tab02_01 header{
background:#dddddd; width:100%; height:100px; line-height:100px;}

.tabConArea #tab02_01 nav{
background:#ff7396; width:20%; height:300px; line-height:300px; display:inline-block;}

.tabConArea #tab02_01 section{
 display:inline-block;background:#73dcff; width:79.5%; height:300px; line-height:300px;}

.tabConArea #tab02_01 footer{
background:#dddddd; width:100%; height:100px; line-height:100px; }
#tab02_01{ text-align:center; }