가변폭 3단 컬럼

#wrapUI

#headerUI

#containerUI

.snbUI

#contentUI

.asideUI

#footerUI

 

<style type="text/css">
/* UI Object */
#wrap{width:100%}
#header{width:100%}
#container{*display:inline-block;_width /**/:100%;padding-right:200px;padding-left:200px}
#container:after{display:block;clear:both;content:''}
.snb{float:left;position:relative;left:-200px;width:180px;margin-right:-180px}
#content{float:left;width:100%}
.aside{float:left;position:relative;left:200px;width:182px;margin-left:-182px}
#footer{width:100%}

/* Layout Color - 실제 서비스 적용 후 아래 코드는 삭제 하세요 */
div{margin:0 0 10px;padding:10px 0;color:#2d2c2d;font-family:Tahoma;font-size:14px;font-weight:bold}
#wrap{position:relative;width:auto;padding:10px;border:1px solid #bdbdbd;background:#f7f7f7}
#header{width:auto;margin-top:10px;padding:10px;border:2px solid #bfbfbf;background:#e5e5e5}
#container{position:relative;border:2px solid #bfbfbf;background:#e5e5e5}
.snb{left:-190px;width:178px;margin-top:10px;border:1px solid #bdbdbd;background:#fff;text-align:center}
#content{position:relative;height:200px;margin-top:10px;border:1px solid #bdbdbd;background:#fff;text-align:center}
.aside{left:190px;width:178px;margin-top:10px;border:1px solid #bdbdbd;background:#fff;text-align:center}
#footer{clear:both;width:auto;padding:10px;border:2px solid #bfbfbf;background:#e5e5e5}
/* //UI Object */
</style>

<!-- UI Object -->
<div id="wrap">
 <p>#wrap</p>
 <!-- header -->
 <div id="header">
  <p>#header</p>
 </div>
 <!-- //header -->
 <!-- container -->
 <div id="container">
  <p>#container</p>
  <!-- snb -->
  <div class="snb">
   <p>.snb</p>
  </div>
  <!-- //snb -->
  <!-- content -->
  <div id="content">
   <p>#content</p>
  </div>
  <!-- //content -->
  <!-- aside -->
  <div class="aside">
   <p>.aside</p>
  </div>
  <!-- //aside -->
  <div class="clear">
  </div>
 </div>
 <!-- //container -->
 <!-- footer -->
 <div id="footer">
  <p>#footer</p>
 </div>
 <!-- //footer -->
</div>
<!-- //UI Object -->

출처 : http://nuli.navercorp.com/data/ui_library/src/pattern/layout/jjs/fluid2.html