These days, all the cool kids in Web design have abandoned table-based layouts in favour of div-based layouts. A div-based layout has sections defined in HTML, with CSS controlling how these sections appear on the page. There are a number of advantages to doing this – most notably, cleaner code and better separation of content from design.
There are a few different ways to position things on a page using CSS. Let’s start by looking at a flow layout. This HTML forms the basis of a page with a title, a links menu, content, and a footer:
This is the Div Test Page
This is the main content area of the page.
This page created using div tags and CSS.
If you view this in your browser with a blank stylesheet (create the CSS file but leave it empty), you’ll see that div tags naturally behave in a similar way to paragraph tags. They create line breaks between the text they contain. Now try viewing the page with the following in the CSS file:
#titlebar {
background: #E4EAF5;
text-align: center;
margin-bottom: 10px; } #menu {
width: 100px;
border-left: 1px dotted #000000;
border-right: 1px dotted #000000; border-top: 1px dotted #000000;
border-bottom: 1px dotted #000000;
padding-left: 10px; padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
float: left;
margin-right: 10px; }
#footer {
clear: left;
margin-top: 20px;
font-size: 10px;
text-align: center; }
You’ll notice that CSS properties dealing with the edges of sections can be manipulated individually for top, bottom, left and right. You could set a border, for example, on only the bottom of a div section, and it would appear much like an underline. The margins deal with space around the outside of the border, and the padding deals with space inside the border.
The major piece of this layout is the float: left instruction for the menu div. This is what positions the menu to the left of the page so that the main content text can wrap around it. The clear: left instruction for the footer means that it will not appear alongside the floating menu – it must “clear” it, and will always be placed underneath. clear: right or clear: both may alternatively be used in other layouts.
Instead of using a float layout, divs can be absolutely positioned. This takes more work, but provides greater flexibility. When an absolute layout is used, the order of the divs in the HTML file doesn’t matter. Some Web developers use this as a technique for search engine optimization; the most relevant content can appear earlier in the source file, theoretically improving the page rating.
When divs are absolutely positioned, the browser will not make sure they don’t overlap. It is very difficult to place a footer at the bottom of an absolute layout, because the main content text may run into it. CSS2 has a fix for this (using position: fixed), but browser support is currently limited. To avoid this issue, our absolute layout will place the footer under the menu:
#titlebar {
background: #E4EAF5;
text-align: center;
position: absolute;
top: 10;
left: 10;
width: 100%; }
#menu {
width: 100px;
border-left: 1px dotted #000000;
border-right: 1px dotted #000000;
border-top: 1px dotted #000000;
border-bottom: 1px dotted #000000;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
position: absolute;
top: 50;
left: 10; }
#content {
position: absolute;
top: 50;
left: 140; }
#footer {
font-size: 10px;
position: absolute;
left: 10;
top: 200;
width: 100px;
}
When divs do overlap, the z-index CSS property allows you to specify which appears on top. Assign each layer a z-index number, and the layer with the higher number appears on top.
With all of the sections absolutely positioned, try changing the order of the divs in the HTML source. You’ll notice that the layout stays the same.
Cooney is a managing partner and chief software architect for Rivervine Technologies Inc. robert.cooney@rivervine.com.