CSS: building a fluid layout

In this post I'm going to show you how to create a fluid layout using CSS. Fluid layouts are simply page layouts built using percentages as unit lengths for element's width. The major advantage of this solution is that your layouts will always fit the browser window, regardless of the screen resolution. A key aspect to understand is that you start with a full 100% width and then you adapt your elements to fit this length.

First things first. We need a basic markup structure like this:

<div id="site">
  <div id="branding"></div>
  <div id="content">
  
    <div id="main"></div>
    <div id="content-sub"></div>
  
  </div>
  <div id="site-info"></div>
</div>

As you can see, we've chosen semantical element names. It's always preferable to have a semantical element nomenclature so that you can even perform a cross-site styling. Now CSS. First, we set some styles on the body element and on the main page container:

body {
    
    margin: 0;
    padding: 2em 0;
    background: #e0e0e0;
    color: #333;
    font: 100% Arial, sans-serif;
}

#site {
    
    width: 80%;
    margin: 0 auto;
    background: #fff;
    border: 2px solid gray;
}

Our main container is actually occupying the 80% of the total page area. Second, some simple styles for our branding section:

#branding {
    
    background: #000;
    color: #fff;
    
}
#branding h1 {
    
    margin: 0;
    font-size: 2.5em;
    font-weight: normal;
    text-transform: uppercase;
    padding: 1em 0;
    text-align: center;
}

Third, since we want to use floats to position our two columns inside the main content area, we need to set up some proper styles on that area:

#content {
    
    height: 100%;
    overflow: hidden;
}

#content p {line-height: 1.4;}

height: 100% has the only purpose of avoiding problems with IE 7 and lower, whereas overflow: hidden will actually contain our floats. Fourth, we need to position our columns using floats:

#main {
    
    float: left;
    width: 60%;
    padding: 0 1em;
}

#content-sub {
    
    
    float: right;
    width: 30%;
    padding: 0 1em;
    background: silver;
}

The first column has a width of 60% (plus padding) and the second one has a width of 30% (plus padding), so they fit the overall 100% width of the content area. Finally, some styles for our #site-info element:

#site-info {
    
    background: #000;
    clear: both;
    color: #fff;
    padding: 2em 0;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}

Equal height columns

To get the effect of equal height columns (that is, the background of the right column that stretches till it reaches the bottom of the container), I've used jQuery:

$(document).ready(function() {
    
    
   var mainHeight = $('#main').height();
   $('#content-sub').height(mainHeight);
    
    
    
});

This approach is much simpler than a CSS approach. In fact, with CSS you should:

1. create a background image with proportional dimensions
2. position the background image so that it's exactly situated at the 30% of the content area

However, the benefit of the CSS approach is that it doesn't depend on JavaScript to work. I leave that choice to you.

Demo

Live demo