Three Column DIV layout dynamics; left = fixed, center = fluid, right = fluid

Question

The best solution I found so far was:

http://jsfiddle.net/kizu/UUzE9/

But that wasn\'t quite it. You see, I have three columns; two of which need to avoid be

Answer 1

You can do this by using float:left for first column, float:right for the last column and making the center column float:none

Updated Demo: http://jsfiddle.net/L85rp/3/

HTML

<div class="col1">Column1</div>
<div class="col3">Column3</div>
<div class="col2">Column2</div>

CSS

.col1 {
    background-color: #ddf;
    float: left;
}
.col2 {
    background-color: #dfd;
    float: none;
}
.col3 {
    background-color: #fdd;
    float: right;
}

---

NOTE: It is necessary to place your right column before your center column in HTML (see above, col3 comes before col2 in the HTML) to make sure that when the browser renders the center column, it knows how to render correctly around the existing floating elements.

---

Updated CSS

.col1 {
    background-color: #ddf;
    float: left;
    width: 285px;
    height: 65px;
}
.col2 {
    background-color: green;
    float: none;
    height: 65px;
    overflow: hidden;
    display: table-cell; /* turn this off to lock height at 65px */
}
.col3 {
    background-color: cyan;
    float: right;
    height: 65px;
}

Updated demo: http://jsfiddle.net/ew65G/1/

Answer 2

This can also be achieved by nested div concept. All you need to do is divide the div section which you want as 3 columns as follows

<div id="main">
    <div id="column-1"></div>
    <div id="column-2">
        <div id="column-2-1"></div>
        <div id="column-2-2"></div>
    </div>
</div>

Please go through How to create 3 column layout using css div to know more about this.

Answer 3

<div style="float:left; width:33%">Column1</div>
<div style="float:left; width:33%">Column2</div>
<div style="float:right; width:33%">Column3</div>

You can adjust width % as required.

Answer 4

You will also need to put "display:inline;" as a div normally displays in block form. Without the inline it will appear as three rows and not three columns.