layout - 4

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #warp {
            width: 100%;
        }
        #header{
            width: 100%;
            height: 100px;
            background-color: #e0f2f1;
        }
        #banner {
            width: 100%;
            height: 300px;
            background-color: #80cbc4;
        }
        #contents{
            width: 100%;
            height: 580px;
            background-color: #26a69a;
        }
        #footer {
            width: 100%;
            height: 100px;
            background-color: #00897b;
        }
        .header-container {
            width: 1200px;
            height: 100px;
            background-color: #b2dfdb;
            margin: 0 auto;
        }
        .banner-container{
            width: 1200px;
            height: 300px;
            background-color: #4db6ac;
            margin: 0 auto;
        }
        .contets-container {
            width: 1200px;
            height: 580px;
            background-color: #009688;
            margin: 0 auto;
        }
        .footer-container {
            width: 1200px;
            height: 100px;
            background-color: #00796b;
            margin: 0 auto;
        }
    </style>​

    <div id="warp">
        <header id="header">
            <div class="header-container"></div>
        </header>
        <article id="banner">
            <div class="banner-container"></div>
        </article>
        <section id="contents">
            <div class="contets-container"></div>
        </section>
        <footer id="footer">
            <div class="footer-container"></div>
        </footer>
    </div>