Bootstrap - Responsive layout vs Fluid layout

Question

I would like to build single web page with the same layout as: http://instatrip.it
Using bootstrap.
In the bootstrap tutorial page http://twitter.github.io/bootstrap/scaffolding.html#layouts
There is a demo of Responsive layout and Fluid layout.
What is the differences between the two approaches?
To get the same layout as instatrip, what layout should I use?
Thank you!

Answer 1

Fluid layout adapts itself to different browser window sizes : all the values used are calculated proportionally to the viewport size, so when resizing, all the columns are resized, but the general layout stays the same.

Responsive layout is able to adapt itself to different sizes as well, but when resizing, the number of columns changes according to the available space. You could think of, for example, you website being resized to one column only on a smartphone.

To get the same layout as instatrip, you'll need to combine fixed layout with fluid layout at least. But there are many ways to do it, I think you should try to understand what is exactly the purpose of each type of layout, and figure out a specific solution for your needs. Here is some reading :

http://radiatingstar.com/make-a-layout-with-fluid-and-fixed-size-columns http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

EDIT : Here is a simple example of a fixed + fluid layout. Found here. I post the code below in case the link goes dead.

HTML :

<div id="page"> 
    <header id="sidebar"> 
        //SIDEBAR CONTENT HERE
    </header> 

    <article id="contentWrapper"> 
        <section id="content"> 
            //CONTENT HERE
        </section> 
    </article> 
</div>

CSS :

html {
    overflow: hidden;
}

#sidebar { 
    background: #eee;
    float: left;
    left: 300px;
    margin-left: -300px;
    position: relative;
    width: 300px;
    overflow-y: auto;
}

#contentWrapper { 
    float: left;
    width: 100%;
}

#content {
    background: #ccc;
    margin-left: 300px;
    overflow-y: auto;
}

Javascript :

$(document).ready(function() {

    //GET BROWSER WINDOW HEIGHT
    var currHeight = $(window).height();
    //SET HEIGHT OF SIDEBAR AND CONTENT ELEMENTS
    $('#sidebar, #content').css('height', currHeight);

    //ON RESIZE OF WINDOW
    $(window).resize(function() {

        //GET NEW HEIGHT
        var currHeight = $(window).height();    
        //RESIZE BOTH ELEMENTS TO NEW HEIGHT
        $('#sidebar, #content').css('height', currHeight);

    });

});