초짜코딩의 잡동사니

layout-1 본문

Layout/float

layout-1

초짜코딩 2022. 4. 17. 18:05 
    <div id="container">
        <div id="header"></div>
        <div id="nav"></div>
        <div id="aside"></div>
        <div id="contents">
            <div id="section01"></div>
            <div id="section02"></div>
        </div>
        <div id="footer"></div>
    </div>​
<style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #FFF3E0;
        }

        #container {
            width: 1200px;
            height: 1080px;
            margin-left: auto;
            margin-right: auto;
        }

        #header {
            width: 1200px;
            height: 100px;
            background-color: #FAE1B7;
        }

        #nav {
            width: 1200px;
            height: 100px;
            background-color: #F7CE8B;
        }

        #aside {
            width: 400px;
            height: 780px;
            background-color: #F4BA61;
            float: left;
        }

        #contents {
            width: 800px;
            height: 780px;
            float: left;
        }

        #contents #section01 {
            width: 800px;
            height: 390px;
            background-color: #E8AC56;
            float: left;
        }
        #contents #section02 {
            width: 800px;
            height: 390px;
            background-color: #F2AB47;
            float: left;
        }

        #footer {
            width: 1200px;
            height: 100px;
            background-color: #F19D38;
            clear: both;
        }
    </style>