Knowpapa.com - a developer's blog

Convert a Fixed Column CSS Layout to a Liquid Layout

The Internet is being assessed from a wide variety of screens ranging from smaller tablet screens to medium sized laptops to large desktop screens all the way up to gigantic mall screens. These screens also come in different shapes or aspect ratios.

Given this issue, web designers world wide face a new challenge – the need for supporting the broadest range of screen size displays.

This has in fact made the practice of using fixed width layout (specifying the size in absolute pixels) somewhat redundant as developers move to a liquid layout (specifying dimensions in percentage) in their cascading style sheets.

In this post, I will show you how you can convert a fixed layout CSS style sheet to a liquid layout.

Imp: Create a backup of your original file, lest things get messed beyond control.

Step 1: Make a note of all Width Specifications in existing CSS

To convert from a fixed to a liquid layout, the only thing we need to study and change is the width element. So we will first scan our CSS file for any width specification in pixel.

Look out for and make a note of all such elements where width is mentioned in pixel.

foo{
...
width: 555px;
}

Step 2: Identify the broad layout structure of your website

Most of the CSS designers worldwide use certain common patterns for designing their broader layout.

body {
..
width:960px;
}

container {
..
width:864px;
}

content {
..
width:672px;

}

sidebar {
..
width:280px;

}

footer{
..
width:864px;
}

Step 3: Convert the Highest width parameter to percentage

Begin by identifying the maximum width specified in your CSS file. For our given example, the maximum width is 960px and is used for the body tag. Change this to 100%. After that change the width of every element changing it from fixed pixel number to a percentage in terms of the highest width.

For our example, the container width was specified as 864px which expressed in percentage would be 864*100/960 = 90%. Similarly calculate and change the values of all the fixed width element to their corresponding percentage terms.

If we rework the previous table, the values would look like:

body {
..
width:100%; // replaced the highest width 960px;
}

container {
..
width:90% // =  864px*100 /960
}

content {
..
width:70%; // =  672px*100 /960

}

sidebar {
..
width:30%; // =  280px*100 /960

}

footer{
..
width:90%; // =  864px*100 /960
}

Final Thoughts

If you do this correctly, you will find your website behaving exactly as it did earlier but showing more flexibility in different screen sizes.

After these changes, if you observe any awkward displacement of your sidebars or content area – this means you have not left margin for some fixed elements like padding and margin.

All you need to do is to slightly reduce the percentage for your sidebar and content areas ( say we reduce the sidebar width to 26% instead of 30% specified above) to make space for other elements.

This is more of a trial and error thing – keep changing the values slightly till you find every element coming back to their formal glory.