Web Systems Design and Online Consumer Behavior [Electronic resources] نسخه متنی

Backyard: Understanding absolute positioning and floats

Ray Henry, Designer

www.csszengarden.com/029

[View full size image]

SOMETIMES KNOWING where to begin a new design is difficult, but inspiration may be found anywhere. Sitting at a café in the park and whiling away the afternoon with oversized lattés and stimulating conversation has sparked many a world-changing idea. Ray Henry found his muse in two gardens when building Backyardthe Zen Garden and his own. The colors of Backyard came naturally from a vivid photo of a flower in Henry's back yard.

As basic as a three-column layout may be, fundamental questions arose as Henry coded, and he wondered whether he could duplicate the many table-based layout effects already familiar to him using CSS. Could he put the link column on the right? If so, how? Should he lay it out differently to make it work? Trial by fire proved to be the learning method, and Henry solved his layout problems one by one.

Layout Basics

Columnar layouts in CSS require a bit of prior knowledge to get started. There is no property "left-column: 200px" that magically allows you to create columns, so various tricks are needed to work around this limitation.

There are two common methods for creating columnar layouts, and each has its own set of advantages and drawbacks. Of the four CSS positioning schemes (absolute, static, relative, and fixed), absolute positioning is the one that allows you to remove content from the regular document flow and place it wherever you please. On the other hand, while not technically a positioning scheme, CSS floats allocate space for content and wrap the rest of the document around them.

NoteWhile it's generally true that columnar CSS layouts aren't explicitly available CSS Tables in fact allow exactly this sort of layout. They were introduced in CSS2, unfortunately Internet Explorer for Windows doesn't support them, which renders them unusable for now. Pity. For more on CSS tables, see www.w3.org/TR/CSS21/tablesl

Either absolute positioning or floats allow the control of elements necessary to build a multicolumn layout. Both floats and absolute positioning may be used on their own, or in conjunction with one another.

Absolute Positioning

Of the two methods, the easier to understand is absolute positioning. Placing a series of elements one after the other in the document (referred to as normal document flow), as in the HTML below, results in the linear layout of the elements, one after the other, shown in FIGURE 1, as you'd expect.

<h1>This is a header</h1>
<p>This is some text</p>
<p>And even more text</p>

However, applying absolute positioning to one of the elements moves the element (the header in this case) to the spot you specify and then collapses the hole left behind (FIGURE 2). The absolutely positioned element has no influence on any of its neighbors, and it's almost as if it doesn't exist in the document (although we can clearly see it.) The syntax might look something like this:

h3 {position: absolute; top: 100px; }

The advantage of absolute positioning is that control over the position of any given element is exact; there is no guesswork involved. Because the element is removed from the normal document flow so completely, however, other elements are never made aware of its influence. This turns out to be a problem, demonstrated later in this section.

Floats

Floats are a little trickier to figure out, so we'll use a few visual aids. FIGURE 3 shows a long passage of text; a photo placed within that text naturally takes up a certain amount of space and displaces the rest of the text (FIGURE 4). To avoid the discontinuous hop between the text above and below the photo, somehow the text needs to negotiate the white space next to the photo and fill in the area more effectively (FIGURE 5).

This is the gist of what CSS floats allow: The photo is inserted into the body of text and floated, and the text plays along by wrapping around it to avoid an ugly gap.

The syntax is simple, but mastery isn't. A snippet of CSS to describe the scenario above might look something like this:

#photo {float: left; margin: 10px 10px 10px 0;}

As floats go, this is as basic as it gets, and highly predictable.

The advantage of float-based layouts is that a floated element isn't actually removed from the document flow; surrounding elements are aware of its position. Due to somewhat spotty browser support, though, floats aren't always perfect for layout, either, and some practical knowledge is necessary to decide between layout methods.

Layout Methods

The markup on the facing page contains the basic building blocks for three columns and a footer. The main content area is placed before the two sidebars within the source code, for the sake of search engines and users browsing without CSS enabled; the sooner the text occurs in the source, the less navigation and link fluff that needs to be skipped over to get to a page's content.

<div id="wrapper">
<div id="contentArea">
<p>(headers and text here)</p>
</div>
<div id="leftPanel">
<p>(links and various text items here)</p>
</div>
<div id="rightPanel">
<p>(links and various text items here)</p>
</div>
<div id="footer">
<p>(Copyright statement, links, etc.)</p>
</div>
</div>

Tip

Internet Explorer for Windows mysteriously doubles the horizontal margins of some floated elements, which may cause head-scratching and frustration if your margin values are more noticeable than 10 pixels or so. Apply display: inline to the floated element to work around this. For more on the bug visit Position is Everything (www.positioniseverything.net/explorer/doubled-marginl).

A quick and dirty layout using absolute positioning requires little planning: Assign a fixed width to all three columns, position each starting from the topleft corner of the document, and, ignoring the footer for now, you're done (FIGURE 6).

#contentArea {width: 450px; position: absolute; top: 0; left: 150px;}
#leftPanel {width: 150px; position: absolute; top: 0; left: 0;}
#rightPanel {width: 150px; position: absolute; top: 0; left: 600px;}
#footer {display: none;}

It hugs the left, but what if you want it centered, as in FIGURE 7? Easily done: The positioning model has a useful feature whereby, if you absolutely position elements contained within another element that is itself positioned, then instead of top and left values being offset from the root element of html (and consequently, the top-left corner of the browser window), they offset from the top-left corner of the containing element.

A little confused? The containing element acts as a new starting point for the absolute positioning of everything within. So if #wrapper is centered and positioned, the columns it contains will remain inside of it. The style below shows us how to tie it all together (the two uses of the text-align property are to overcome a flaw in Internet Explorer 5 for Windows that doesn't allow centering of an element by setting its margins to auto).

body {
text-align: center;
}
#wrapper {
width: 750px;
margin: 0 auto;
text-align: left;
position: relative;
}
#contentArea {
width: 450px;
position: absolute;
top: 0;
left: 150px;
}
#leftPanel {
width: 150px;
position: absolute;
top: 0;
left: 0;
}
#rightPanel {
width: 150px;
position: absolute;
top: 0;
left: 600px;
}

But what if the footer is needed? Because the absolutely positioned columns don't affect surrounding elements, the footer ignores them and is positioned where it normally would be if they didn't exist; in this case as the very first element on the page.

To work around this using absolute positioning, the height of each column would need to be known ahead of time, and the footer's position would have to start below the bottom of each. Without turning to JavaScript, there's no way to do this if the text length of any one of the columns is unknown, except by moving from absolute positioning to floats.

In FIGURE 8, the footer automatically clears the three columns and positions itself below them, thanks to the use of floats.

body {
text-align: center;
}
#wrapper {
width: 750px;
margin: 0 auto;
text-align: left;
position: relative;
}
#contentArea {
width: 450px;
float: left;
}
#leftPanel {
width: 150px;
float: left;
}
#rightPanel {
width: 150px;
float: left;
}
#footer {
clear: both;
}

The obvious problem is that the left column and the center column have now swapped spots. Because floats stay within the regular document flow, source order within the HTML is far more important than it is with absolute positioning. The easiest way to solve this problem is to swap the order of the left and center columns in the HTML. There are more complicated workarounds for this problem, which involve the use of negative margins and some very lateral thinking; suffice it to say that source order swapping does the job nine times out of ten.

Tip

For more about the negative margin solution, view Ryan Brill's demo (www.alistapart.com/articles/negativemargins).

Absolutely Complementary

As many do when learning CSS layouts, Ray Henry ended up using absolute positioning to accomplish his three-column layout for Backyard. A sound decision in many cases and certainly so for Backyard, absolute positioning is easy to learn and effective to use.

It's not the perfect solution for all scenarios, though, and problems may arise while using it. For those occasions when either a footer is needed or page elements need more awareness of their surrounding elements, floats are there to pick up the slack. Neither is perfect on its own, but together they make for a practical set of complementary layout tools. Use one or use both; what you can do with a combination of the two is limited only by what you can dream up.