In a recent blog post, I gave a brief introduction to CSS layouts available in Dreamweaver CS3. At this year’s WebDU conference, Stephanie Sullivan, founder and principal of W3Conversions and Adobe community expert gave a thorough presentation named “CSS Layouts & Dreamweaver CS3”.

Before delving into the different types of layouts Dreamweaver CS3 has to offer, let’s first take a look at some of the basic CSS principles of positioning elements on a Web page.

Basic Principles

The “flow” is the normal order of elements within the HTML document. It is how a Web page would get displayed if no floats or positioning were attached to elements. The flow will have a bearing on the location of elements in CSS layouts, depending on the positioning technique you choose.

There are four types of positioning techniques:

|> Static: this is the default element position in the normal flow of the document,
|> Relative: the position of the element is relative to its regular position in the flow,
|> Absolute: the element is positioned on an XY axis of its parent container, and
|> Fixed: the element is positioned on an XY axis of the viewpoint (browser window).

A core principle to understand before playing with layouts and positioning is the Box model. It will help you visualise the different elements on a Web page and their order.

HTML elements by default have two ways of getting displayed: inline and block. Inline elements display horizontally and when they use up all the space available, wrap to the next line. They only use as much space as they need. Examples include: img, span and a.

Block elements display vertically, as though there was a line break above and below them and use up 100 per cent of their parent container’s space. Examples include: p, div and ul.

Display properties of elements can be manipulated with CSS in the following ways: display:block; display:inline; and display:none to position elements vertically, horizontally or not display them at all.

Taking an element out of its normal flow and moving it to the right or left is called floating. The only options available are float:left, float:right, and float:none. There is no top or bottom.

A problem that can occur is called a float drop. This happens when the container’s width is too small to accommodate both the floated element and the static content following it. In such a scenario, instead of wrapping around the floated element, the static content drops below it.

Here are some rules concerning floats:

|> A width must be set on a floated element
|> If a float is to be placed next to another element, it must come before that element in the source code
|> A float does not cover text or inline images
|> Given that a float is pulled out of the normal flow, a float residing in another container must be cleared for the parent to hold it properly
|> If you clear within a non-floated div(#mainContent), all floats, as well as the side columns will be cleared. To prevent this, float the #mainContent div or put a floated div inside the #mainContent div

Dreamweaver CS3 layout types

CSS layouts refer to the structure of the document only. Dreamweaver CS3 provides 32 ready to use layouts along with documentation to accelerate your Web design process. They are fully compatible with Firefox 1.0, 1.5 and 2.0, Internet Explorer 5.5, 6.0 and 7.0, Opera 8.0 and 9.0, and Safari 2.0.

There are five types of layouts in total: fixed, liquid, elastic, hybrid, and absolute positioning.

Fixed

With this type of layout the container width, as well as the columns inside it, are set in pixels and it appears in the centre of the browser window.

The advantage of this method is that faux columns are easily attainable. Faux columns is a term given to columns whose background colour stretches to the end of the page, regardless of how much content there is, making the columns appear equal in height. This effect can be achieved by repeating an image vertically. Additionally, float drop can be avoided in the main content area, as the exact element dimensions are known.

On the downside, the columns do not expand as the text size increases.

Liquid

In liquid layouts, the container width and column width is set using percentages of the browser window. If the width of the container is set to 100 per cent, the website will stretch across the whole viewpoint without a horizontal scroll bar. According to Sullivan, this method lets you get creative with headers. You can repeat the image horizontally or display more when the browser is wider.

However, the exact dimensions of elements are difficult to predict and faux columns are more difficult to achieve. We can create equal length columns with this layout by using a background image with a desired faux column ratio and setting the image to the same horizontal position.

Elastic

The width measurement of the container and the columns within it are expressed in ems. An em is a point size of a font. The elastic layout will inflate when the text size increases, not the browser width.

An advantage of this layout is that when resized everything remains in proportion and it’s accessible to users who have difficulties with their vision. It also lets you get creative with headers, like the previous layout.

However, a float drop is more challenging to avoid as the exact dimensions of the elements are unknown, but min-width can be used to combat the problem.

Hybrid

The hybrid layout brings together both elastic and liquid layout types. The overall width is dictated by a percentage and the side columns are based on ems.

The column widths increase as the text size increases and a creative use of headers is possible, but knowing exact dimensions of elements remains a challenge, as well as avoiding a float drop. As mentioned before, min-width can be used to fix this.

Absolutely Positioned

The previous layouts mentioned all utilise floats for the columns, but this type of layout absolutely positions them instead. The difficulty with this is that the side columns are pulled out of the document’s flow, hence the footer won’t recognise them and may overlap with them if there is less content in the main area than the side columns.

The benefit of this technique though is that there is no float drop, as there’s no floating and the headers and footers are simple because the width is set.

These Dreamweaver CS3 layouts will be useful to any developer, regardless of skill level. If you are a novice, the rich commenting in code view will get you up to speed with CSS layouts, and if you are already experienced with CSS it will give you a head start when building your website.