Last lesson I promised to expand upon web typography, but I've recieved requests in the intervening period to explain some layout basics (this one's for you, Ryuki). Rest assured we'll return to more advanced typography in due time.
Columnar Layout: The Meat and Potatoes of CSS
In the past, web sites often used tables to arrange blocks of text and graphics; this evolved into the common practice of image-slicing, with tables used to hold these complex arrangements together.
In CSS web design this technique of page layout is frowned upon, primarily because it isn't a semantic use of Markup. Tables have a specific purpose: to display tabular data such as statistics where the contents of cells have defined relationships.
With a handful of core CSS rules, you can achieve sophisticated layouts without using tables, while retaining semantic Markup.
Back to Basics
Before tackling this lesson you may want to brush up on the basics of XHTML. Here is an excellent introduction from Accessify.com for you to review. Even HTML veterans will learn something from it.
You can also look at previous installments of this series (2, 3, 4) for some introductory CSS we’ll use.
Two Columns, Many Ways
Please refer to the example Markup and Stylesheet documents for more detailed explanations of the following.
CSS is well suited to multi-column page layouts such as the one used at the Standard. In this and other similar designs, graphical elements tile and repeat vertically creating a seamless result that can be extended infinitely.
Let’s start by looking at last lesson’s Example Page. The Markup and the final result follow the same linear order, displaying from top to bottom.
We used divs here to style text blocks, but divisions can also be used to affect layout.
Two Columns - Method One: floating
Four regions of the markup are separated into an equal number of divisions: #header, #sidebar, #content, and #footer. These divs can be named as you like, but I’ve kept them self-descriptive here.
In the linked stylesheet, these divs are given layout rules. The most important rules here are:
#sidebar { float: left; width: 150px; }
and
#content { margin-left: 180px; }
The size of width is arbitrary, but the margin-left that follows it should account for the width and any padding used. If you want a more fluid layout, replace these fixed values with percentages.
Try taking the float rule out of the mix and see what happens. Notice that the #content div clears the bottom of the #sidebar div. If you retain the float but remove the margin-left from #content, the latter displays behind the former.
Essentially, the float property takes a related element out of the display order. This only applies to elements that follow a float. Notice that #sidebar does not float above the #header div that precedes it.
Block-level elements that follow floats ignore them (Block-level elements, such as headlines, display with a space above and below them).
Inline elements that follow floats wrap around them (inline elements display next to each other in a line). The div entitled #boxout is an example of this.
Experiment with making a right-aligned sidebar. Just change the float and margin values listed above.
Float support is still a bit erratic across the browsers, so take my descriptions here with a grain of salt. PiE describes the common float errors you may encounter, and how to remedy them.
Stay Tuned…
Next time we’ll look at another way to make a two column layout. If you were wondering, we’ll look at how to make the sidebar extend to the bottom of the layout.