레이아웃 가변형

2단 가변형
#wrap {margin:0; width:auto; padding:10px; border:1px solid #bdbdbd; background:#f7f7f7;}
#header,#container{width:auto; padding:10px; border:2px solid #bfbfbf; background:#e5e5e5;}
.snb,#content{background:#fff; border:1px solid #bdbdbd; text-align:center;}
.snb{width:180px; float:left;}
#content{height:200px;margin-left:200px;_margin-left:197px;}
.clear {clear:both;}
#footer{padding:10px; background:#e5e5e5; border:2px solid #bfbfbf; width:auto;}

<div id="wrap">
 <div id="header">#header</div>
 <div id="container">
  <div class="snb">.snb</div>
  <div id="content">#content</div>
  <div class="clear"></div>
 </div>
 <div id="footer">#footer</div> 
</div>

3단 가변형
#wrap {width:auto; padding:10px; border:1px solid #bdbdbd; background:#f7f7f7;}
#header {width:auto; padding:10px; border:1px solid #bfbfbf; background:#e5e5e5;}
#container {position:relative; width:auto;padding-left:200px; padding-right:200px;height:220px;border:1px solid #bfbfbf; background:#e5e5e5;}
.snb {position:relative;width:174px;float:left; margin-right:-200px;margin-top:10px; background:#fff; left:-190px; border:1px solid #bdbdbd; text-align:center;}
#content {width:100%;_width:99.6%; float:left;margin-top:10px; background:#fff; position:relative; height:200px; border:1px solid #bdbdbd; text-align:center;}
.aside {position:relative;width:174px; float:left; margin-left:-180px;margin-top:10px; background:#fff; left:190px; border:1px solid #bdbdbd; text-align:center;}
.clear {clear:both;}
#footer {width:auto; clear:both; padding:10px; background:#e5e5e5; border:1px solid #bfbfbf;}

<div id="wrap">
 <div id="header">
  #header
 </div>
 <div id="container">
  <div class="snb">.snb</div>
  <div id="content">#content</div>
  <div class="aside">.aside</div>
  <div class="clear"></div>
 </div>
 <div id="footer">
  #footer
 </div>
</div>