CSS Basic Page Structure
The concept of separating content from layout instructions was developed by document storage specialists decades before CSS came along. It is a logical concept which works best if approached logically. In the case of site design, that surely begins with basic page structure.
The first step towards having CSS behave predictably is to include a valid doctype and HTML tag as the first two lines of your HTML. A longer list of all the options is offered by W3C, but the most common are:
If you are coding in HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> ... If you are coding in XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> ...
If you don’t use a doctype, use one which is incomplete or doesn’t match the rest of your code, browsers drop into what is know as “quirks mode” which means they assume you have written very old code. They will ignore recent additions to CSS and interpret others wrongly. This can totally destroy your layout.
A major pitfall when using CSS is the unwillingness of browser developers to adopt a consistent standard. There are solutions (hacks) to almost all these inconsistencies, but it is easier to avoid them where possible. To this end I recommend beginning every CSS file with some parameters for the whole page.
body {
margin: 0;
padding: 0;
}
These two properties define the space around the outside of an element (margin) and the space inside an element (padding). If we seem to be leaving logic behind already, think of the screen as the master container and the body (your HTML) as an element within it. It is necessary to set the padding to zero to counter the default padding set by Opera.
If you do want space around your design, just change the values for margin. You can either set a single value to be applied on all sides:
body {
margin: 10px;
padding: 0;
}
or different values for top, bottom and each side:
body {
/* top, right, bottom, left */
margin: 20px 50px 20px 50px;
padding: 0;
}
Single Columns
It isn’t necessary to create an overall division to contain the rest of your page, if the whole page is a single column. Nevertheless, something like this means you establish parameters for your page which don’t then need to be repeated several times:
/* in your CSS file */
#wrapper {
width: 780px;
/* "auto" will center the block */
margin: 0 auto 0 auto;
padding: 20px;
}
/* your HTML */
<div id="wrapper">
All your content goes here
</div>
You can leave out the margin parameter if you want your content to show against the left of the screen. The padding parameter is also optional and of course the actual dimensions are up to you. Padding may not be useful if your content will appear on your overall background color, but if they are not the same, you probably would not want your content hard up against the edges of that center block:
Double Columns
I am going to use a double column layout to illustrate a complete typical page structure of header, content and footer:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
/*global settings */
body {
margin: 0;
padding: 0;
}
/* basic structure */
#wrapper {
width: 780px;
margin: 0 auto;
}
#header {
}
#content {
}
.left {
float: left;
width: 350px;
}
.right {
float: right;
width: 350px;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
HEADER
</div>
<div id="content">
<div class="left">LEFT COLUMN</div>
<div class="right">RIGHT COLUMN</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
</html>
Although we haven’t applied any styling yet to the header or content blocks, it makes sense to provide place-holders, since we have created the blocks in HTML. Making the total width of the left and right columns (350+350=700) less than the width of our “master” block (780-20-20=740), creates the space between the two columns. Note that otherwise no widths have been specified and 100% is implied by default. The float parameter, is what tells each block to place itself to the left or the right.
We haven’t styled the footer block but we did need to include clear: both. Without that parameter, the block would locate itself as high up the screen as possible, which in this case would be between the left and right blocks. Always include clear: both in a block which follows multiple to tell browsers to create it below the longest of the blocks above.
That covers basic page layout for one- and two-column designs. Three-column layouts are slightly more tricky, so I shall cover them separately.
HINT: It is a big timesaver to store code similar to that above as templates for all the basic layouts you commonly use: simply open a file and your page is already part made. I include a little more than shown above - basic fonts, header sizes, link treatment, etc - but only such elements as are always, or almost always used. Indenting code (and I usually leave an empty line between blocks) makes the flow of the code easier to follow, and if you indent every new block and close indents at the end, you will soon see (when your final block close instruction is away from the left of the screen) if you forgot to close a block along the way. Give ID’s and classes descriptive names so that your style file doesn’t become gibberish. Finally, always comment anything in your HTML or CSS which needed special treatment or might otherwise catch you out if you don’t look at the file(s) again for a year.
Update
At the beginning of this article, I mentioned the value of including parameters in a style sheet to account for the differences between browser defaults. For those who are more familiar with the issues involved, here is the set of instructions which I use myself. It pretty much over-rides all the default styling in all the major browsers, leaving you to start with a clean sheet, as it were:
/* clear browser defaults */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
abbr,acronym,fieldset,img{border:0;}
address,caption,cite,code,dfn,h1,h2,h3,h4,h5,h6,th,var{font-size:100%;font-style:normal;font-weight:normal;}
caption,th{text-align:left;}
div{overflow:hidden;}
h1,h2,h3,h4,li{white-space:nowrap;overflow:hidden;}
ol,ul{list-style:none;}
/* global hacks */
body{text-align:center;}
Leave a Comment