전체 가변 레이아웃

:: CSS :: 

/* Layout */ #wrap{width:100%} #header{width:100%} #container{*display:inline-block;_width /**/:100%;padding-right:10px;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 Style 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}  

 :: HTML ::

<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 --> <div class="clear"> </div> </div> <!-- //container --> <!-- footer --> <div id="footer"> <p>#footer</p> </div> <!-- //footer --> </div>