<head>
<title>3단 레이아웃
</title>
<style type="text/css">
#banner{
background-color:red;
}
#leftSidebar{
background-color:yellow;
position:absolute;
top:0;
left:0;
width:150px;
}
#mainContent{
background-color:blue;
margin-left:170px;
margin-right:170px;
}
#rightSidebar{
background-color:yellow;
position:absolute;
top:0;
right:0;
width:150px;
}
#footer{
background-color:#808000;
}
#contentWrapper{
position:relative;
}
</style>
</head>
<body>
<div id="banner">banner</div>
<div id="contentWrapper">
<div id="leftSidebar">leftSidebar</div>
<div id="mainContent">mainContent<br>여기는 본문영역입니다.</div>
<div id="rightSidebar">rightSidebar</div>
<div id="footer">footer</div>
</div>
</body>
</html>
- 왼쪽, 오른쪽 사이드바는 분문영역 보다 길어지지 않도록 해야함. 길게 되면 아래 footer부분을 가리게 됨. 만약에 길어지게 되면 footer에 margin-top을 설정하는 방법으로 해결하면 됨. 아니면 http://www.shauninman.com/archive/2006/05/22/clearance_position_inline_absolute.php 참고
댓글 없음:
댓글 쓰기