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

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

3 thoughts on “CSS: building a fluid layout”

  1. thanks for this info. It looks like the grey background doesn't resize when you change the dimensions.

  2. That's the drawback with the jQuery solution: you have to keep track of browser's window to automatically make the background stretch. That's why sometimes the CSS solution works better. Anyway, if you want to test with a background image, make sure that your image will be always very large, so you can calculate percentages more easily. For example, if you have a 2000 x 10 background image, you have to left one side transparent and then calculate the percentage which, in this case, is about 30%. so open a calculator and make the maths. Thanks for the comment :-)

  3. xml is a very interesting language to be used and contain the data object model or abbreviated DOM.tutorial very good and hopefully can help me in building a web application thanks

Leave a Reply

Note: Only a member of this blog may post a comment.