Border Layout 2

by marrok

HTML

<div style="width:400px;height:300px">
    <div class="north">North</div>
        <div class="east">East</div>
        <div class="center">Center</div>
        <div class="west">West</div>
    <div class="south">South</div>
</div>

CSS

.east{
    width: 20%;
        background-color: #9ff;
    box-sizing: border-box;
    display: inline-block;
    float:left;
    
}

.center {
    width: 45%;
        background-color: #7cc;

        box-sizing: border-box;
    display: inline-block;
        float:left;
}

.west{
    width: 35%;
        background-color: #22d;
    box-sizing: border-box;
    display: inline-block;
        float:left;
}

.north, .south {
    background-color: #ddd;
           box-sizing: border-box;
}