How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?

Question

Is it possible to create a 2 Column Layout (Fixed - Fluid) Layout ( http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/) with Twitter Bootstrap (http://twitter.github.com/bootstrap/)?

Do you have any solutions?

Solution 1

- Another Update -

Since Twitter Bootstrap version 2.0 - which saw the removal of the .container-fluid class - it has not been possible to implement a two column fixed-fluid layout using just the bootstrap classes - however I have updated my answer to include some small CSS changes that can be made in your own CSS code that will make this possible

It is possible to implement a fixed-fluid structure using the CSS found below and slightly modified HTML code taken from the Twitter Bootstrap Scaffolding : layouts documentation page:

HTML

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="fixed">  <!-- we want this div to be fixed width -->
            ...
        </div>
        <div class="hero-unit filler">  <!-- we have removed spanX class -->
            ...
        </div>
    </div>
</div>

CSS

/* CSS for fixed-fluid layout */

.fixed {
    width: 150px;  /* the fixed width required */
    float: left;
}

.fixed + div {
     margin-left: 150px;  /* must match the fixed width in the .fixed class */
     overflow: hidden;
}


/* CSS to ensure sidebar and content are same height (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;  
}

I have kept the answer below - even though the edit to support 2.0 made it a fluid-fluid solution - as it explains the concepts behind making the sidebar and content the same height (a significant part of the askers question as identified in the comments)

---

Important

Answer below is fluid-fluid

Update As pointed out by @JasonCapriotti in the comments, the original answer to this question (created for v1.0) did not work in Bootstrap 2.0. For this reason, I have updated the answer to support Bootstrap 2.0

To ensure that the main content fills at least 100% of the screen height, we need to set the height of the html and body to 100% and create a new css class called .fill which has a minimum-height of 100%:

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}

We can then add the .fill class to any element that we need to take up 100% of the sceen height. In this case we add it to the first div:

<div class="container-fluid fill">
    ...
</div>

To ensure that the Sidebar and the Content columns have the same height is very difficult and unnecessary. Instead we can use the ::after pseudo selector to add a filler element that will give the illusion that the two columns have the same height:

.filler::after {
    background-color: inherit;
    bottom: 0;
    content: "";
    right: 0;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: -1;  
}

To make sure that the .filler element is positioned relatively to the .fill element we need to add position: relative to .fill:

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

And finally add the .filler style to the HTML:

HTML

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="span3">
            ...
        </div>
        <div class="span9 hero-unit filler">
            ...
        </div>
    </div>
</div>

Notes

• If you need the element on the left of the page to be the filler then you need to change right: 0 to left: 0.

Solution 2

Update 2018

Bootstrap 4

Now that BS4 is flexbox, the fixed-fluid is simple. Just set the width of the fixed column, and use the .col class on the fluid column.

.sidebar {
    width: 180px;
    min-height: 100vh;
}

<div class="row">
    <div class="sidebar p-2">Fixed width</div>
    <div class="col bg-dark text-white pt-2">
        Content
    </div>
</div>

http://www.codeply.com/go/7LzXiPxo6a

Bootstrap 3..

One approach to a fixed-fluid layout is using media queries that align with Bootstrap's breakpoints so that you only use the fixed width columns are larger screens and then let the layout stack responsively on smaller screens...

@media (min-width:768px) {
  #sidebar {
      min-width: 300px;
      max-width: 300px;
  }
  #main {
      width:calc(100% - 300px);
  }
}

Working Bootstrap 3 Fixed-Fluid Demo

Related Q&A:
Fixed width column with a container-fluid in bootstrap
How to left column fixed and right scrollable in Bootstrap 4, responsive?

Comments

[mbecker]

The Sidebar and the Content column must have the same height (min-height: 100%).

[mbecker]

The Sidebar will be static (for a naviagtion) and the height of the content column will be various. That means each of them could be the longer column.

[mbecker]

I have used jquery to set the height to 100%, but i prefer a css solution: 50.57.127.196/bootstrap/fluid.html (The CSS Syntax isn`t pretty nice and the right white space bugs me)

[Chris Burbridge]

What am I missing here? The question seems totally valid. The Bootstrap documentation provides classes for .container or .container-fluid, and .row or .row-fluid, that both seem to be designed to wrap a series of exclusively fixed, or exclusively fluid columns.

[Scott Stafford]

The accepted answer seems to be fluid-fluid. Here is an answer that is actually fixed-fluid: stackoverflow.com/a/9739345/237091

[panosru]

Thanks a lot! This helped a lot! Exactly what I was looking for! Up vote of course :)

[Mike]

I'm confused, I thought you asked for fixed-fluid, not fluid-fluid? (25%-75% I think is Bootstrap's example)

[Jason Capriotti]

I just want to point out that while this code was probably great at the time, it does not work in Bootstrap 2.

[My Head Hurts]

@JasonCapriotti - thanks for letting me know. I have updated the answer

[Nur Amsyari]

unfortunately this solution doesn't work when you make the sidebar the filler: jsfiddle.net/RaHyh/34

[My Head Hurts]

@BalaClark The idea is that you make the back ground color of the page and the side bar the same colour and then the content of the page becomes the filler. However, if you just want to just make the sidebar fill the screen then change right: 0; to left: 0 - although you will run into issues with padding which you will have to fix (this case can be resolved by changing left to the same as your padding-left which in this scenario is 20px): jsfiddle.net/RaHyh/38

[Henrik Skogmo]

I followed the instructions, and it works great! But I'm trying to change the color of the sidebar, but I can't figure out how. Everything I try ends up with changing much more than I want. Is there an fix for this?

[My Head Hurts]

@HenrikSkogmo if you can knock up a JSFiddle of your problem then I will take a look

[Mason G. Zhwiti]

I'm just as confused as @mikemike: the two working examples linked to in this answer both appear to be fluid-fluid, not fixed-fluid?

[chuckles]

Yeah, both those examples are fluid-fluid, not fixed-fluid.

[Nate]

Is it not possible to get a fixed fluid solution then?

[goseta]

the below answer is the correct use of fix - fluid, this example is fluid - fluid

[T3rm1]

Please down-vote this answer. It's fluid-fluid and not fixed-fluid as asked.

[Mark]

This is the perfect solution. Is there a way of preventing column swapping while making Browser very small? Thanks

[TanguyP]

The first part of this answer works perfectly out-of-the-box for a fixed-fluid layout: jsfiddle.net/Lja1867n/1

[Joshua Lee]

It works only if the Content div is 'naturally' smaller than the width of (100% - 300px). in my case, the 'natural' size of the content is greater than that and causes the content div to go to the row after the sidebar ends. the bootstrap 3 solution still works, i just used width instead of min and max width.