Basic Page Layouts Using CSS
Moving from basic text manipulation to layouts using Cascading Style Sheets (CSS) is an area where many new web designers hit their first wall. Although it might seem confusing at first, CSS-based layouts are relatively easy to create and require only a few simple style rules and some basic markup.
Centered Layout
The easiest layout to create is a simple <div> that’s centered on the page with a fixed width (this site uses a centered layout). This is done by setting the width property on the element to a fixed value—say 800px—and then making the left and right margins auto. This rule will produce a content area that is centered in the browser window and doesn’t expand or collapse with window adjustments. The markup needed is a single container <div> within the body of the HTML document:
<body>
<div id="wrap">
</div>
</body>And the CSS:
#wrap {
margin: 0 auto;
width: 800px;
}Two Column Layout with Header and Footer
Once you have the basic centered layout, you can create a two column design using the same basic markup. All you need to do is add container divs for a header, content area, sidebar and footer. Make sure your main content is above your sidebar in the page hierarchy. The main content is more important and we want users that may have disabled CSS to see that information first. Add the four new divs inside the wrap container so that they stay inside the centered column. 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 introduces two new properties: float and clear. The content and sidebar divs need to be floated left and right respectively and given fixed widths. Because both divs are now floating a clear: both property needs to be added to the #footer rule to push it below the content and sidebar.
#wrap {
margin: 0 auto;
width: 800px;
}
#content {
float: left;
width: 500px;
}
#sidebar {
float: right;
width: 280px;
}
#footer {
clear: both;
}That’s it. Fill the containers with paragraphs, content and images and you’ve got the foundation for a simple single or two-column website.
Floating Layouts with CSS « Slschweppe’s Weblog
[…] http://siarto.com/2009/02/04/basic-css-layouts/ Possibly related posts: (automatically generated)Tableless layoutlayout? […]
MC
Really like your post, I can relate to it. The CSS that I wrote back in 2006 for my company’s website (www.G-and-O.com) is a 3-column layout that reads well in a screenreader and without CSS. The content is read first with sidebar nav at the bottom to better accommodate disabled users. Interestingly enough, back in 2006 when I first coded this site, there was little interest in that aspect of the design.
Yordan Georgiev
Thanks, Here a small tip for visualising / debugging … I use to find and replace /*Debug with /*Debug*/ in a larger site if something goes wrong …
#wrap {margin: 0 auto;
width: 800px;
/* Debug */
background-color:Aqua;
border:1px solid #646464;
border-style:solid;
/**/
}
#content {
float: left;
width: 500px;
/* Debug */
background-color:Gray;
border:1px solid #646464;
border-style:solid;
/**/
}
#sidebar {
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 centering doesn’t work in IE.
Jeff Siarto
@Anna
What version 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).