How to Create a Fixed-Fluid 2-Column Layout with Twitter Bootstrap?

How to Implement a Fixed-Fluid 2-Column Layout with Twitter Bootstrap

Background

Creating a 2-column layout with one fixed-width column and one fluid-width column is a common design pattern. Earlier versions of Twitter Bootstrap allowed this using the .container-fluid class, but this is no longer supported in Bootstrap 2.0 and later.

Solution

To address this, we can employ a combination of CSS and slightly modified HTML code:

HTML

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="fixed">...Fixed Column...</div>
        <div class="hero-unit filler">...Fluid Column...</div>
    </div>
</div>

CSS

/* Fixed-Fluid Layout CSS */

.fixed {
    width: 150px;  /* Fixed width for fixed column */
    float: left;
}

.fixed + div {
    margin-left: 150px;  /* Match fixed width from .fixed class */
    overflow: hidden;
}

/* Content Height Equalization CSS (optional) */

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
    position: relative;
}

.filler:after{
    background-color:inherit;
    bottom: 0;
    content: "";
    height: auto;
    min-height: 100%;
    left: 0;
    margin:inherit;
    right: 0;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: -1;  
}

Notes

• Adjust .fixed width to your desired fixed column size.
• To display the fluid column on the left, replace right: 0 with left: 0 in the .filler CSS.
• The additional CSS is optional but ensures that the fixed and fluid columns are the same height.

The above is the detailed content of How to Create a Fixed-Fluid 2-Column Layout with Twitter Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!