자주 사용하는div+css 3열 레이아웃 구조와 스타일 (1)

3열 레이아웃은 흔히 볼 수 있는데 보통 좌우 2열의 너비가 고정된 다음에 중간 내용이 스스로 적응한다.
구조:

1 <div id="nav">  </div>
2 <div id="sidebar">  </div>
3 <div id="main">    </div>

스타일:

1 #nav{ float:left; margin-right:10px; overflow:hidden; width:15%; background:blue; height:200px;}
2 #sidebar{ float:right; margin-left:10px; width:20%; overflow:hidden;  background:yellow; height:200px;}
3 #main{ overflow:hidden; background:red; height:200px;}

부동을 이용하여 왼쪽 층을 왼쪽으로 부동시키고 오른쪽 층을 오른쪽으로 부동시킨 다음에 중간 층이 자동으로 중간으로 간다. 이런 삼열 구조의 구조는 좌우 가운데만 있을 수 있고 그렇지 않으면 배치가 어지러워서 원하는 결과를 얻지 못한다.