Jeff Siarto - Web Designer

Basic Page Layouts Using CSS

Mov­ing from basic text manip­u­la­tion to lay­outs using Cas­cad­ing Style Sheets (CSS) is an area where many new web design­ers hit their first wall. Although it might seem con­fus­ing at first, CSS-​​based lay­outs are rel­a­tively easy to cre­ate and require only a few sim­ple style rules and some basic markup.

Centered layoutCen­tered Lay­out
The eas­i­est lay­out to cre­ate is a sim­ple <div> that’s cen­tered on the page with a fixed width (this site uses a cen­tered lay­out). This is done by set­ting the width prop­erty on the ele­ment to a fixed value—say 800px—and then mak­ing the left and right mar­gins auto. This rule will pro­duce a con­tent area that is cen­tered in the browser win­dow and doesn’t expand or col­lapse with win­dow adjust­ments. The markup needed is a sin­gle con­tainer <div> within the body of the HTML doc­u­ment:

<body>
    <div id="wrap">
    </div>
</body>

And the CSS:

#wrap {
    margin: 0 auto;
    width: 800px;
}

Two Col­umn Lay­out with Header and Footer
Two-column layoutOnce you have the basic cen­tered lay­out, you can cre­ate a two col­umn design using the same basic markup. All you need to do is add con­tainer divs for a header, con­tent area, side­bar and footer. Make sure your main con­tent is above your side­bar in the page hier­ar­chy. The main con­tent is more impor­tant and we want users that may have dis­abled CSS to see that infor­ma­tion first. Add the four new divs inside the wrap con­tainer so that they stay inside the cen­tered col­umn. Here is the updated HTML:

<body>
    <div id="wrap">
        <div id="header">
        </div>
        <div id="content">
        </div>
        <div id="sidebar">
        </div>
        <div id="footer">
        </div>
    </div>
</body>

The CSS intro­duces two new prop­er­ties: float and clear. The con­tent and side­bar divs need to be floated left and right respec­tively and given fixed widths. Because both divs are now float­ing a clear: both prop­erty needs to be added to the #footer rule to push it below the con­tent and side­bar.

#wrap {
    margin: 0 auto;
    width: 800px;
}

#content {
    float: left;
    width: 500px;
}

#sidebar {
    float: right;
    width: 280px;
}

#footer {
    clear: both;
}

That’s it. Fill the con­tain­ers with para­graphs, con­tent and images and you’ve got the foun­da­tion for a sim­ple sin­gle or two-​​column web­site.

Down­load exam­ple code

tagged: , ,

6

  • Floating Layouts with CSS « Slschweppe’s Weblog

    […] http://​siarto​.com/​2​0​0​9​/​0​2​/​0​4​/​b​a​s​i​c​-​c​s​s​-​l​a​y​outs/ Pos­si­bly related posts: (auto­mat­i­cally generated)Tableless lay­out­lay­out? […]

  • MC

    Really like your post, I can relate to it. The CSS that I wrote back in 2006 for my company’s web­site (www​.​G​-and​-​O​.com) is a 3-​​column lay­out that reads well in a screen­reader and with­out CSS. The con­tent is read first with side­bar nav at the bot­tom to bet­ter accom­mo­date dis­abled users. Inter­est­ingly enough, back in 2006 when I first coded this site, there was lit­tle inter­est in that aspect of the design.

  • Yordan Georgiev

    Thanks, Here a small tip for visu­al­is­ing /​ debug­ging … I use to find and replace /*Debug with /*Debug*/ in a larger site if some­thing goes wrong …

    #wrap {
    margin: 0 auto;
    width: 800px;
    /* Debug */
    background-color:Aqua;
    border:1px solid #646464;
    border-style:solid;
    /**/
    }

    #con­tent {
    float: left;
    width: 500px;
    /​* Debug */​
    background-color:Gray;
    border:1px solid #646464;
    border-style:solid;
    /**/
    }

    #side­bar {
    float: right;
    width: 280px;
    /​* Debug */​
    background-color:Lime;
    border:1px solid #646464;
    border-style:solid;
    /**/

    }

    #footer {
    clear: both;
    /*Debug*/
    background-color:Olive;
    border:1px solid #646464;
    border-style:solid;
    /**/
    }

  • gzzoozoo

    Very nice, neatly explained.…

  • Anna

    The cen­ter­ing doesn’t work in IE.

  • Jeff Siarto

    @Anna

    What ver­sion of IE are you using? This code should work in IE7 and above (I no longer develop for IE6, so I can’t help you there).

Recommended

Also of Interest