가변형 3행2단 (temp_ep_pg_v3_1f1v)

  • CSS Code

    #wrap{position:absolute; width:auto; height:auto; top:0; left:0; right:0; bottom:0; overflow:hidden;}
    #header{position:absolute; left:0px; right:0px; top:0px; width:100%; min-width:1000px; height:40px; z-index:25; overflow:hidden;}
    #container{position:absolute; top:40px; left:0; right:0; bottom:40px; min-height:0; margin:0; overflow:hidden; z-index:20;}
    #container:after{clear:both; content:""; display:block; height:0; visibility:hidden;}
    .snb{width:200px; height:100%; overflow-x:hidden; overflow-y:auto; *position:absolute; *left:0;}
    .content{position:absolute; top:0; left:200px; right:0; width:auto; height:100%; overflow:auto;}
    #footer{position:absolute; left:0px; right:0px; bottom:0px; width:100%; min-width:1000px; height:40px; z-index:100;}
    /* Layout width,height,color 임의지정 - 실제 서비스 적용 후 아래 코드는 삭제 하세요 */
    div{color:#2d2c2d; font-family:Tahoma; font-size:14px; font-weight:bold;}
    #wrap{background:#f7f7f7; text-indent:10px;}
    #header{background:#e5e5e5;}
    #header p{padding:10px 0;}
    #container{background:#ebebeb;}
    .snb{background:orange;}
    .snb p{height:300px; margin:10px; border:1px dashed #fff;}
    .content{background:red;}
    .content p{width:500px; height:500px; margin:10px; border:1px dashed #fff;}
    #footer{background:#e5e5e5;}
    #footer p{padding:10px 0px;}
  • HTML Code

    <div id="wrap">
    <!-- header -->
    <div id="header">
    <p>#header</p>
    </div>
    <!-- //header -->
    <!-- container -->
    <div id="container">
    <!-- snb -->
    <div class="snb">
    <p>.snb(넓이,높이값 임의 지정)</p>
    </div>
    <!-- //snb -->
    <!-- content -->
    <div class="content">
    <p>.content (넓이,높이값 임의 지정)</p>
    </div>
    <!-- //content -->
    </div>
    <!-- //container -->
    <!-- footer -->
    <div id="footer">
    <p>#footer</p>
    </div>
    <!-- //footer -->
    </div>