Methods To Create a 3-Column Layout: Fluid - Fixed - Fluid

Question

How can we create a 3-column layout, Fluid - Fixed - Fluid, as shown in the picture below. Is there more than one option? If so, what are the pros and cons of each?

Note: Feel free to add more answers if they are different to the three I've already posted. Also, I know this has been asked before, but I can't find anywhere with all three answers that is up to date.

Answer 1

Method 4 - Flex Model

Similar to Method 3 in AndyM's post, this method relies on CSS3 and will only work in modern browsers. However, as it's name would suggest, it's flexible, and easy to implement. We use three new CSS properties: display:flex; flex-grow:;, and flex-basis:;.

We add the first to #wrap, which tells the browser that the items inside are going to be laid out using the flex model. The second two tell the browser whether or not an item will grow (is flexible), and what is the initial width.

Pros: The CSS is clean and short, and very easy to change later. Unlike Method 2 & 3, the fixed width only needs to be declared once.

Cons: Browser compatibility. This has just slightly better compatibility than calc(), but not by much. We can use it now, but we lose basically all but the newest versions of most mobile browsers, and of Internet Explorer.

Working Fiddle

HTML:

<div class="wrap">
    <div class="fluid">
        Fluid Box
    </div>
    <div class="fixed">
        Fixed Box
    </div>
    <div class="fluid">
        Fluid Box
    </div>
</div>

CSS:

  .wrap {
    display: flex;
    height:300px;
} 
.fixed {
    background-color:lightblue;
    flex-grow: 0;  /* Does this box grow? 0 means no. */
    flex-basis: 500px;
} 
.fluid {
    background-color:orange;
    flex-grow: 1;
    flex-basis: 0px;
}

I've edited this to make the example as close as possible to the examples in Methods 1-3, for easier comparison of the methods. All kudos to vals for the initial post, I had never heard of this method. - AndyM

Original Fiddle

Answer 2

Options

There are  three  four ways of doing this, all using different CSS and having different levels of complexity and browser compatibility. In all  three  four, we start with three divs which create our three columns.

Method 1 - Most compatible, longest code.

Method 2 - Medium compatible, medium code.

Method 3 - Least compatible, shortest code.

All  three  four will produce what we want, as shown in the screenshot below:

EDIT:

There is a Method 4, suggested by vals, which uses the CSS Flexbox Model. See his answer for details.

---

Method 1 - Extra Inner div

Insert an extra div inside the left and right fluid columns.

Pros: This method has the best compatibility, even back to IE6.

Cons: We have to insert an extra div, and the CSS is the longest of all three methods.

Working Fiddle

HTML:

<div class="wrap">
    <div class="fluid left">
        <div class="inner">
            Fluid Box
        </div>
    </div>
    <div class="fixed">
        Fixed Box
    </div>
    <div class="fluid right">
        <div class="inner">
            Fluid Box
        </div>
    </div>
</div>

CSS:

.wrap {
    overflow:hidden;
}
.wrap div {
    height:300px;
    float:left;
}
.fixed {
    background-color:lightblue;
    width:500px;
}
.fluid {
    background-color:orange;
    width:50%;
}
.left {
    margin-left:-250px;
}
.left .inner {
    margin-left:250px;
}
.right {
    margin-right:-250px;
}
.right .inner {
    margin-right:250px;
}

---

Method 2 - Use box-sizing CSS Styling

If you are willing to use some CSS3, you can set the left and right fluid columns to have box-sizing:border-box;. This lets use take the margin from the Method 1's inner divs, and place it as padding in the outer divs, without interfering with their widths. box-sizing isn't supported by all older browsers though.

Pros: The code is cleaner, because we don't have an extra inner div. The CSS is slightly cleaner as well.

Cons: Browser compatibility. We are going to lose IE6 and IE7.

Working Fiddle

HTML:

<div class="wrap">
    <div class="fluid left">
        Fluid Box
    </div>
    <div class="fixed">
        Fixed Box
    </div>
    <div class="fluid right">
        Fluid Box
    </div>
</div>

CSS:

.wrap {
    overflow:hidden;
}
.wrap div {
    height:300px;
    float:left;
}
.fixed {
    background-color:lightblue;
    width:500px;
}
.fluid {
    background-color:orange;
    width:50%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.left {
    margin-left:-250px;
    padding-left:250px;
}
.right {
    margin-right:-250px;
    padding-right:250px;
}

---

Method 3 - Use calc() for width

Following the trend, we can use a method which involves even newer CSS, for even cleaner but less backward-compatible code. If we calculate the width of the left and right fluid columns using width:calc(% - px), we don't need box-sizing, or extra divs.

Pros: The CSS is even cleaner and shorter than in method 2.

Cons: Browser compatibility. Not only do we lose older versions of IE, we lose all but the very newest versions of most mobile browsers..

Working Fiddle

HTML:

<div class="wrap">
    <div class="fluid">
        Fluid Box
    </div>
    <div class="fixed">
        Fixed Box
    </div>
    <div class="fluid">
        Fluid Box
    </div>
</div>

CSS:

.wrap div {
    height:300px;
    float:left;
}
.fixed {
    background-color:lightblue;
    width:500px;
}
.fluid {
    background-color:orange;
    width:-webkit-calc(50% - 250px);
    width:-moz-calc(50% - 250px);
    width:calc(50% - 250px);
}

---

Summary

Method 1 - Most compatible, longest code.

Method 2 - Medium compatible, medium code.

Method 3 - Least compatible, shortest code.