<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
.page_wrap {width:100%; height:100%; margin:auto; }
.page_wrap .top {width:100%; height:100px; }
.page_wrap .middle {width:100%; height:100%; }
.page_wrap .left {width:10%; height:100%; float:left; }
.page_wrap .center {width:80%; height:100%; float:left; }
.page_wrap .right {width:10%; height:100%; float:left; }
.page_wrap .bottom {width:100%; height:30px; clear:both; }
</style>
</head>
<body>
<div class=page_wrap>
<div class=top >
<div class=left > top left </div>
<div class=center > top center </div>
<div class=right >top right </div>
</div>
<div class=middle >
<div class=left > middle left </div>
<div class=center > middle center </div>
<div class=right >middle right </div>
</div>
<div class=bottom > bottom </div>
</div>
</body>
</html>
'CSS 및 반응형웹' 카테고리의 다른 글
| DIV 세로로 가운데 정렬[한줄일때만 가능] (0) | 2014.01.11 |
|---|---|
| 미디어 쿼리 예 (0) | 2013.08.26 |
| CSS class 두개 추가하는 방법 (0) | 2013.08.09 |
