How to convert a liquid-layout to a fixed-width design with simp

Converting a liquid-layout to fixed-width with CSS

A lot of people have emailed me asking how they can convert my liquid layouts into fixed-width designs - this post will explain how that's done.

The process is very simple and it will work with all of my liquid layouts (percentage and em/pixel versions).

Two simple steps...

1) The HTML

Add a div around the existing liquid layout and give it an id:

<div id="fixed"><!-- existing liquid layout here --></div>

2) The CSS

We need to add some CSS rules to the new div plus to the body of the page:

body {
   text-align:center;
}
#fixed {
   margin:0 auto;
   width:90%;   /* you can use px, em or % */
   text-align:left;
}

To ensure that the fixed-width design is centred on all common browsers we must add the text-align:center; on the body tag, plus left and right margins of 'auto' on our new div. If we fail to do both of these things then the layout will not be centred but instead push to the left in non-standard browsers like Internet Explorer.

The fixed div has text-align:left; to override the center on the body tag that would otherwise center all the text on the page.

Finally the fixed-div is given a width - this is the part that makes the layout 'fixed'. You have three choices of units; pixels, ems or a percentage.

And that's it. Try experimenting with different width measurements and units to find the one that's right for your website.

Advanced, dynamic layouts

If you are feeling more adventurous then try making layouts more dynamic by altering your CSS on-the-fly with JavaScript.

This will put more control back into the hands of your visitors. Give them the choice between fixed-width or liquid-layout by adding a button that dynamically changes the width of the fixed-div.

The options are endless.

Published: 2 Jul 2008