포지션 예제
position을 적용한 크로스브라우징 레이아웃
position의 값을 absolute 로 지정한 요소를 감싼 요소가 position 지정이 되어 있다면 (absolute, relative, fixed) 그 포지션으로부터 left와 top이 지정된다. 대체로 바깥쪽 박스의 위치가 유동적일 때가 많으므로 absolute로 지정하는 경우가 많다.
<style type="text/css">
*{margin:0; padding:0;}
#wrapper{position:relative; width:800px; margin:0 auto;}
#side{width:180px; background:orange; position:absolute; left:0; top:0;}
#contents{width:600px; background:green; margin-left:200px;}
</style>
<body>
<div id="wrapper">
<div id="side">
<p>Left Menu</p>
</div>
<div id="contents">
<p>Contents Area</p>
<p>Contents Area</p>
<p>Contents Area</p>
<p>Contents Area</p>
<p>Contents Area</p>
</div>
</div>
</body>
position적용시 left와 top등을 지정한 이후에도 margin 적용이 가능하다.
position에서는 float의 clear와 같은 속성이 없어서 흔히 min-height를 적용한다. absolute를 적용한 좌측메뉴가 컨텐츠보다 길어지면 푸터를 가려버리기 때문에 컨텐츠에 최소한의 높이를 설정해 주는 방법이다. 그러나 익스플로러의 하위버전에서 이 속성이 적용되지 않으므로 스타핵(* html)을 이용해서 height를 적용하기도 한다.
<style type="text/css">
*{margin:0; padding:0;}
#wrapper{position:relative; width:800px; margin:0 auto;}
#top{height:50px; background:gray;}
#side{width:180px; background:orange; position:absolute; left:0; top:0; margin-top:50px;}
#contents{width:600px; background:green; margin-left:200px; min-height:400px;}
* html #contents{height:400px;}
#footer{height:40px; background:#ccc;}
</style>
<body>
<div id="wrapper">
<div id="top">
<p>Top Menu</p>
</div>
<div id="side">
<p>Left Menu</p>
</div>
<div id="contents">
<p>Contents Area</p>
<p>Contents Area</p>
<p>Contents Area</p>
<p>Contents Area</p>
<p>Contents Area</p>
</div>
<div id="footer">
<p>Foot Area</p>
</div>
</div>
</body>
