Three column layout

by prasun_sultania

HTML

<div class="content">
    <div class="primary">
        <div class="primary">
        <!-- your primary primary content goes here -->
        </div>
        
        <div class="secondary">
        <!-- your secondary primary content goes here -->
        </div>
    </div>
    
    <div class="secondary">
    <!--navigation and secondary content goes here -->
    </div>
</div>

CSS

.content .primary {
    width: 60%; /* width increased and padding removed*/
    height: 200px;
    background-color: red;
    float: right;
    display: inline;
}

.content .secondary {
    width: 40%;
    height: 200px;
    background-color: green;
    float: left;
    display: inline;
}

.content .primary .primary {
    width: 50%;
    float: left;
    display: inline;
    background-color: gray;
}

.content .primary .secondary {
    width: 50%;
    height: 200px;
    background-color: yellow;    
    float: right;
    display: inline;
}