You are here: Home > Blog > How to convert a liquid-layout to a fixed-width design with simple CSS

How to convert a liquid-layout to a fixed-width design with simple 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. HTML

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

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

  2. 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-with design is centered on all common browsers we must add the text-align:center; on the body tag, plus also 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 centered 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 and percent.

    • Pixels will set the layout to an exact pixel width. If this width is larger than the size of the browser viewport then the page will scroll sideways.
    • Ems will give you a width relative to the size of the text on your page. If you change your text size then the width of the layout will change too (smaller text = smaller width etc).
    • Percent will give a width relative to the size of your browser window. For example: 90% will always give a layout width of 90% of the visible page.

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. See my dynamic layout example and click the 'Toggle layout style' link in the top right of the screen to swap between full screen width and centered fixed-width designs. The options are endless.

Date
2 Jul 2008
Tags
Cascading style sheets (CSS) Semantic XHTML Tutorials Web design Website layouts

Blog tags