Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Integrated Web Design: Position This! CSS Positioning Demystified

  • Print
  • + Share This
  • 💬 Discuss
Like this article? We recommend

Like this article? We recommend

Looking for the right position? Look no further. In this installment of Integrated Web Design, Molly Holzschlag teaches you all about positioning schemes. This article examines the four true positioning schemes in CSS, clarifies the confusion between absolute and relative positioning, and explains that although floats are often great for use in layouts, they should not be confused as an actual part of CSS positioning.

CSS positioning is far easier to understand than it first seems to be. While preparing for a recent CSS training session, I sent ahead a questionnaire to the attendees. Ninety percent of the responses pointed to confusion with understanding positioning schemes, especially the difference between relative and absolute positioning.

Fret no more! Positioning is pretty easy to understand once it's explained in clear terms. The confusion is partly due to the fact that it's not something that's clearly discussed in general forums, nor is it something that the specs make clear. The concepts appear to be abstract, but they're really not, as you'll soon find out.

Begin with Flow

The best way to gain an understanding of positioning is to begin with the concept of normal flow, which is the default behavior of a web browser. Each block level element is stacked on the next, with inline elements flowing into the available space.

Consider the XHTML document in Listing 1.

Listing 1 A sample XHTML document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Daddy Long Legs</title>
</head>

<body>

<p>It was a distressing time; and poor Jerusha Abbott, being the oldest orphan, 
had to bear the brunt of it. But this particular first Wednesday, like its 
predecessors, finally dragged itself to a close.</p>

<p>Jerusha escaped from the pantry where she had been making sandwiches for the 
asylum's guests, and turned upstairs to accomplish her regular work. Her 
special care was room F, where eleven little tots, from four to seven, occupied 
eleven little cots set in a row. </p>

<p>Jerusha assembled her charges, straightened their rumpled frocks, wiped their 
noses, and started them in an orderly and willing line towards the dining-room 
to engage themselves for a blessed half hour with bread and milk and prune pudding.</p>

</body>
</html>

I add a simple style rule just to outline the block elements for you:

p {border: 1px solid orange;}

You can then see the boxes generated by each paragraph (Figure 1).

Figure 1Figure 1

This figure allows you to visualize my simple document as a series of blocks. These blocks all default left and stacked on top of each other because they are within the normal flow. If you resize your browser, the boxes will flow to fill out whatever space is available, but the boxes will be retained (Figure 2).

Figure 2Figure 2

CSS positioning is based on the premise that a block is either in the normal flow or it's taken out of the normal flow via a positioning scheme.

NOTE

The first containing block in any document is the root element of that document, which in HTML and XHTML is the html element, of course. That html is the first block in a document is something many people miss, thinking that it begins at the body element. This thinking isn't illogical, but it's inaccurate and might be one of the reasons that positioning seems so confusing.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus