<div class="container0">
    <div class="header0">Header</div>
    <div class="content0">
        <div class="left-content0">Left content</div>
        <div class="right-content0">right content</div>
    </div>
    <div class="footer0">footer</div>
</div>
<style>
    .container0{
        border:1px solid #111;
        width:100%;
    }
    .header0{
        border:1px solid #111;
        width:100%;
        height:50px;
    }
    .content0{
        border:1px solid #111; 
        width:100%;
    }
    .left-content0{
        border:1px solid #111;
        width:70%;
        height: 300px;
    }
    .right-content0{
        border:1px solid #111;
        width:30%;
        height: 300px;
    }
    .footer0{
        border:1px solid #111;
        width:100%;
        height:50px;

    }
</style>

<div class="container1">
    <div class="header1">Header</div>
    <div class="content1">
        <div class="left-content1">Left content</div>
        <div class="right-content1">right content</div>
    </div>
    <div class="footer1">footer</div>
</div>
<style>
    .container1{
        width:100%;
        box-sizing: border-box;
    }
    .header1{

        background-color:#005082;
        width:100%;
        height:50px;
        color:#fff;
    }
    .content1{
        width:100%;
    }
    .left-content1{
        background-color:#93a43e;
        width:20%;
        height: 300px;
        float:left;
        color:#fff;
    }
    .right-content1{
        background-color:#feac00;
        width:80%;
        height: 300px;
        float:left;
        color:#fff;
    }
    .footer1{
        background-color:#005082;
        width:100%;
        height:50px;
        color:#fff;
        clear:both;
    }
</style>

<div class="container2">
    <div class="header2">Header</div>
    <div class="content2">
        <div class="left-content2">Left content</div>
        <div class="middle-content2">Middle content</div>
        <div class="right-content2">right content</div>
    </div>
    <div class="footer2">footer</div>
</div>
<style>
    .container2{
        width:100%;
    }
    .header2{
        background-color:#005082;
        width:100%;
        height:50px;
        color:#fff;
    }
    .content2{
        width:100%;
    }
    .left-content2{
        background-color:#93a43e;
        width:20%;
        height: 200px;
        float:left;
        color:#fff;
    }
    .middle-content2{
        background-color:#1e6abc;
        width:60%;
        height: 200px;
        float:left;
        color:#fff;
    }
    .right-content2{
        background-color:#feac00;
        width:20%;
        height: 200px;
        float:left;
        color:#fff;
    }
    .footer2{
        background-color:#005082;
        width:100%;
        height:50px;
        color:#fff;
        clear:both;
    }
</style>

<div class="container2">
    <div class="header2">Header</div>
    <div class="nav-bar2">
        <ul>
            <li><a href="#">menu1</a></li>
            <li><a href="#">menu2</a></li>
            <li><a href="#">menu3</a></li>
        </ul>
    </div>
    <div class="content2">
        <div class="left-content2">
            <p>Side menu</p>
            <div class="side-menu">
                <ul>
                    <li><a href="#">menu1</a></li>
                    <li><a href="#">menu2</a></li>
                    <li><a href="#">menu3</a></li>
                </ul>
            </div>
        </div>
        <div class="middle-content2">Middle content</div>
        <div class="right-content2">right content</div>
    </div>
    <div class="footer2">footer</div>
</div>
<style>
    .container2{
        width:100%;
    }
    .header2{
        background-color:#005082;
        width:100%;
        height:50px;
        color:#fff;
    }
    .nav-bar2{
        background-color:#00a0d2;
        width:100%;
        height:50px;
        color:#fff; 
    }
    .content2{
        width:100%;
    }
    .left-content2{
        background-color:#93a43e;
        width:20%;
        height: 200px;
        float:left;
        color:#fff;
    }
    .middle-content2{
        background-color:#1e6abc;
        width:60%;
        height: 200px;
        float:left;
        color:#fff;
    }
    .right-content2{
        background-color:#feac00;
        width:20%;
        height: 200px;
        float:left;
        color:#fff;
    }
    .footer2{
        background-color:#005082;
        width:100%;
        height:50px;
        color:#fff;
        clear:both;
    }

    .nav-bar2 ul{
        list-style-type: none;
        display: inline;
    }
    .nav-bar2 ul li{
        float: left;
        padding: 5px;
    }
    .side-menu ul{
        list-style-type: none;
        padding-left:5px;
    }
    .side-menu ul li{
        padding-top:5px;  
    }
</style>