Creating a layout with fluid and fixed columns

24 August 2012

Try it yourself on JSfiddle.netThis sample shows you how to create a three-column layout with one fluid column and two fixed width columns. With little HTML/CSS experience you will also be able to alter this example to convert it to a two-column layout.

First you need to create the HTML:

<div class="col1"><div class="inner">column 1</div></div>
<div class="col2"><div class="inner">column 2</div></div>
<div class="col3"><div class="inner">column 3</div></div>

The extra "inner" elements enable you to easily add padding, change widths, add borders and other styling. Next step is to add the CSS to your CSS file:

.col1,
.col2,
.col3 {
    float: left; /* All columns need to float left */
}
.col1 .inner,
.col2 .inner,
.col3 .inner {
    padding: 20px; /* styling for all inner elements */
}

.col1 {
    width: 100%; /* the first and fluid column needs to be 100% width */
    background-color: yellow;
}
.col1 .inner {
    margin-right: 500px; /* width of col 2 & 3 combined */
}
.col2 {
    width: 200px;
    margin-left: -500px; /* width of col 2 & 3 combined */
    background: limegreen;
}
.col3 {
    width: 300px;
    margin-left: -300px; /* width of col 3 */
    background: lightblue;
}

That's it. Supereasy!

Try this code yourself on jsfiddle.net: http://jsfiddle.net/xVrXG/
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

1 comment

  1. Gravatar

    Phil Did,

    06 December 2012

    Nice bit and good link for testing grid ( http://jsfiddle.net)
    Thank's