<div id="wrap">
        <div id="header"></div>
        <div id="nav"></div>
        <div id="left_aside"></div>
        <div id="aside"></div>
        <div id="section"></div>
        <div id="article"></div>
        <div id="footer"></div>
    </div>
*{
        margin: 0;
    }
    body{
        background-color: #E1F5FE;
    }
    #wrap{
        width: 1200px;
        margin: 0 auto;
    }
    #header{
        width: 100% ;
        height: 100px;
        background-color: #B3E5FC;
    }
    #nav{
        width: 100%;
        height: 100px;
        background-color: #81D4FA;
    }
    #left_aside{
        width: 30%;
        height: 780px;
        background-color: #4FC3F7;
        float: left;
    }
    #aside{
        width: 70%;
        height: 260px;
        background-color: #29B6F6;
        float: left;
    }
    #section{
        width: 70%;
        height: 260px;
        background-color: #03A9F4;
        float: left;
    }
    #article{
        width: 70%;
        height: 260px;
        background-color: #039BE5;
        float: left;
    }
    #footer{
        width: 100%;
        height: 100px;
        background-color: #0288D1;
        clear: both;
    }
    @media (max-width: 1220px){
        #wrap{
            width: 96%;
        }
        #left_aside{
            width: 30%;
        }
        #aside{
            width: 70%;
        }
        #section{
            width: 35%;
            height: 520px;
        }
        #article{
            width: 35%;
            height: 520px;
        }
    }
    @media (max-width: 768px){
        #wrap{
            width: 100%;
        }
        #left_aside{
            width: 30%;
        }
        #aside{
            width: 70%;
            height: 390px;
        }
        #section{
            width: 70%;
            height: 390px;
        }
        #article{
            display: none;
        }
    }
    @media (max-width: 480px){
        #wrap{
            width: 100%;
        }
        #left_aside{
            width: 100%;
            height: 200px;
        }
        #aside{
            width: 100%;
            height: 430px;
        }
        #section{
            width: 100%;
            height: 150px;
        }
        #article{
            display: none;
        }
        #footer {
            width: 100%;
        }
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.