웹표준 코딩 Box Model

웹표준 Box model

레이아웃 2010년 자료, 백업 -_-

<style type="text/css" media="screen">
body {
    margin: 0;
    padding: 0;
    font-family: Verdana, sans-serif;
    font-size:10pt;
    background: #fff;
    }
#wrap {
    max-width: 800px;
    margin:0 auto;
    }
#container {
    background: #333; /* RIGHT 하단에 공백 생길때 */
    }
#header {
    margin: 0;
    padding: 10px 20px;
    background: #369;
    }
#header h1 {
    margin: 0;
    padding: 0;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 180%;
    color: #fff;
    }
#main-body {
    float: left;
    width: 70%;
    background: #ccc; /* LEFT 하단에 공백 생길때 */
    }
#content {
    float: right;
    width: 60%;
    background:#8080FF;
    }
#sidebar_left {
    float: left;
    width: 40%;
    background: #FFFF00;
    }
#sidebar_right {
    float: right;
    width: 30%;
    background: #008000;
    }
#content div, #sidebar_left div, #sidebar_right div {
    padding: 20px;
    }
#footer {
    clear: both;
    padding: 10px 20px;
    background: #FF0080;
    }
</style><p style="text-align: center; clear: none; float: none;"><span class="imageblock" style="display:inline-block;width:548px;;height:auto"><img src="http://cfile4.uf.tistory.com/image/22732E4454E1DEC92EE0E5" height="693" style="" width="548"></span></p><p><br></p>
 
 
 
 
<div id="wrap">
<div id="container">
    <div id="header">
        <h1>Header</h1>
    </div>
 
    <div id="main-body">
        <div id="content">
            <div>
            <h2>Contents</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tristique, sapien id scelerisque euismod, turpis lacus sollicitudin nulla, non iaculis quam nulla ullamcorper erat. Nam accumsan laoreet enim. Cras vel lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas malesuada mattis metus. Proin vehicula pretium nunc. Donec est arcu, viverra a, rutrum sit amet, interdum vitae, est. Aenean enim orci, faucibus in, posuere et, congue pretium, nunc. Vestibulum sagittis turpis vitae pede. Praesent est. Aenean consectetuer ornare arcu. Nulla rhoncus. Pellentesque venenatis enim eu tellus. Etiam fermentum, orci non iaculis gravida, neque nulla aliquam diam, a consequat enim neque vel nunc. Aliquam tincidunt. Suspendisse potenti. Donec mauris. Donec id lectus. Ut ultricies leo vitae velit.</p>
            </div>
        </div>
 
        <div id="sidebar_left">
            <div>
            <h2>Left</h2>
            <p>Side LEFT Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tristique, sapien id scelerisque euismod, turpis lacus sollicitudin nulla, non iaculis quam nulla ullamcorper erat. Nam accumsan laoreet enim. Cras vel lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas malesuada mattis metus. Proin vehicula pretium nunc. Donec est arcu, viverra a, rutrum sit amet, interdum vitae, est. Aenean enim orci, faucibus in, posuere et, congue pretium, nunc. Vestibulum sagittis turpis vitae pede. Praesent est.</p>
            </div>
        </div>
    </div> <!-- end #main-body -->
 
    <div id="sidebar_right">
        <div>
        <h2>Right</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tristique, sapien id scelerisque euismod, turpis lacus sollicitudin nulla, non iaculis quam nulla ullamcorper erat. Nam accumsan laoreet enim. Cras vel lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas malesuada mattis metus. Proin vehicula pretium nunc. Donec est arcu, viverra a, rutrum sit amet, interdum vitae, est. Aenean enim orci, faucibus in, posuere et, congue pretium, nunc. Vestibulum sagittis turpis vitae pede. Praesent est.</p>
        </div>
    </div>
 
    <div id="footer">
        <h2>Footer</h2>
    </div>
 
</div> <!-- end #container -->
</div> <!-- end #wrap -->