ellenbo
6/10/2014 - 9:58 PM

3 column div layout: two fixed width columns, one fluid column

3 column div layout: two fixed width columns, one fluid column

<div class="container">
    <div class="right">
        right content fixed width
    </div>
    <div class="left">
        left content fixed width
    </div>
    <div class="center">
        center content flexible width
    </div>
</div>
Description:
How to create a three column div layout where two columns are fixed width and the third is responsive.

Source:
Stackoverflow
http://stackoverflow.com/questions/5195836/2-column-div-layout-right-column-with-fixed-width-left-fluid
and
http://stackoverflow.com/questions/16472085/problems-with-stretching-center-div-between-fixed-width-divs
.container {
   height: auto;
   overflow: hidden;
}

.left {
    float: left;
    width: 300px;
    }
    
.center {
    float: none; /* not needed, just for clarification */
    width: auto;
    overflow: hidden;
}

.right {
    float: right;
    width: 300px;
}