HTML5 기본 Layout Template

index.html

			header
		
		

			

			nav
			
			

			contents
			
		
		

			
Rev Factory
		

style.css

html,body {
	padding: 0;
	margin: 0;
	text-align: center;
	height: 100%;
}

body {
	font-size: 12px;
	font-family: "돋음",dotum,sans-serif;
	color: #333;
}

#Head {
	position: relative;
	width: 100%;
	height: 50px;
	overflow: hidden;
	z-index: 10;
	background-color: #eee;
}

#bodyWrap {
	width: 100%;
	min-height: 100%;
	margin: -50px auto -30px;
	background-color: #fbfcfc;
	z-index: 5;
}

/* IE Hack */
*html #bodyWrap { 
	height: 100%;
}

#footerWrap {
	display: block;
	width: 100%;
	line-height: 30px;
	height: 30px;
	background-color: #e9eff6;
	clear: both;
}

#bodyWrap > nav, #bodyWrap > section {
	padding: 50px 0 30px 0;
}

#bodyWrap > nav {
	background: #ffdfee;
	float: left;
	margin-right: -200px;
	width: 200px;
	height: 200px;
}

#bodyWrap > section {
	margin-left: 200px;
	background: #ffffee;
	height: 500px;
}

#bodyWrap > section:after {
	content:" "; 
	display:block; 
	clear:both;
}

참고 블로그