Entomology: Centered layouts in contemporary Web design

Jon Hicks, Designer

www.csszengarden.com/030

IT'S INTERESTING WHERE IDEAS come from. In the case of Entomology the concept for the design came from a music videothe Yeah Yeah Yeahs' single "Pin." Jon Hicks wanted to create a visual hook that still related to the Garden concept, without being obviously a garden itself. The video for "Pin" contains images of pinned butterflies, which fit Hicks's goal perfectly.

After sketching a very rough layout, Hicks went directly to the CSS without creating an Adobe Photoshop mockup. Due to the fact that this was a personal project, and because he was overwhelmed with work responsibilities, he had less time to go through a standard design process. He also claims to have worn a pith helmet and kept a butterfly net close at hand, as it was important to get the right ambience! The result is a design that is a complete departure from Hicks's typical style.

Fixed and Liquid Layouts

Layouts for the Web have conventionally been one of two types: fixed or liquid. A fixed design is one that has a specific width. Fixed designs might be aligned to the left, aligned to the right (although that's rarely done), or centered, but their content does not expand beyond the specified width. Entomology, for example, has a fixed layout (FIGURE 1).

Figure 1. Diagram of fixed-width behavior.

A liquid design, also referred to as fluid or dynamic, is a design that uses percentages rather than specific widths so that the layout flows to fill the entire available viewport (FIGURE 2).

Figure 2. Diagram of liquid-design behavior.

Combination effects can be created, too. Consider a three-column layout, in which the flanking columns are set to specific widths but the center column uses a percentage (or no defined width). This will result in the design always filling the viewport, but with the center column expanding or contracting as the browser is resized or the page is viewed at different resolutions.

As with many things, trends and preferences come and go. Early on in the Web's life, it was all the rage to create fixed designs. After a while, people began to discuss the benefits of liquid design, and for a few years after, liquid design was all the rage.

In the past two years, the popularity of fixed designs has increased againparticularly among standards-based designers. At the time of this writing, almost all leading practitioners in the field were using fixed designs for their own sites and in their work. It's an interesting trend, and it brings to the surface reasons why designers might choose a fixed design over a liquid one.

First and foremost, a fixed design gives a designer more control, in that he or she has a contained space in which to work. Text line lengths are easier to control, as is specific placement and proximity of text and images. These reasons are very likely the cause for a re-emergence of fixed layouts as a trend.

Liquid designs have their strengths, too. Filling the browser viewport means using all available space and avoiding the visual balance problem that occurs when a design is flush left and fixed, taking up only a portion of the available space. But the downside is the loss of control over line length, flow, and placement and proximity of page items. For educated designers, these are considerable problems with only limited solutions available.

One approach designers use in order to have the control provided by a fixed design yet address the visual balance problem is to center their fixed designs along the horizon. This allows for any additional white space around the design to balance equally to the right and left of the design when the browser is resized, avoiding a vast space of nothingness to the right.

Getting Centered

Centering in CSS is a bit challenging because the legitimate way of centering a design horizontally with CSS doesn't work consistently across browsers. Hicks ran into this problem while working on Entomology, and he decided to employ a workaround to solve the problem. Before we get to his approach, though, an examination of the various means of centering CSS-based layouts horizontally is in order.

Centered Design Using Auto Margins

The preferred way to horizontally center any element is to use the margin property and set left and right values to auto. For this to work with layouts, you'll create a containing div. You must include a width for your containing div:

 div#container {   margin-left: auto;   margin-right: auto;   width: 168px; { 

FIGURE 3 shows an example of the effect using one of the butterfly images from Hicks' design. The image was placed in a div and centered using the auto-margin approach.

Figure 3. Centering an element with auto-margin.

Note

Compliance mode is part of a browser technology referred to as DOCTYPE switching. The XHTML of the CSS Zen Garden uses the proper DOCTYPE to invoke compliance mode. To learn more about this important concept, please see "Doctype switching and standards compliance: An overview," by Matthias Gutfeldt (http://gutfeldt.ch/matthias/articles/doctypeswitch.html).

This technique works very well in almost all contemporary browsers, even Micro soft Internet Explorer 6 for Windows, provided you're in compliance mode. Unfortunately, it doesn't work in prior versions of Internet Explorer for Windows, so its use is limited to those situations where the browser base has no requirement below version 6.0.

TABLE 1 describes primary browser support for this technique.

Table 1. Browser Support for Auto Margins

Browser	Version	Support
Internet Explorer	6.0, compliance mode	Yes
Internet Explorer	6.0, quirks mode	No
Internet Explorer	5.5 Windows	No
Internet Explorer	5.0 Windows	No
Internet Explorer	5.2 Macintosh	Yes
Mozilla	All current versions	Yes
Mozilla Firefox	All versions	Yes
Netscape	4.x	No
Netscape	6.x+	Yes
Opera	6.0, 7.0 Macintosh and Windows	Yes
Safari	1.2	Yes

Despite the support issues, most designers advocate the use of this technique wherever possible, as it can be considered the proper method for centering anything horizontally with CSS.

Centered Design Using Text-Align

Another centering technique requires the use of the text-align property, set to a value of center and applied to the body element. It's an out-and-out hack, but it works in a fairly broad range of browsers, so it comes in handy.

This is a hack because it applies a text property to a containing element, not to text. This, in turn, creates additional work for you.

After creating the divs required for your layout, you'd apply the text-align property like so:

 body {     text-align: center; } 

The main problem? All descendants of the body will be centered (FIGURE 4).

Figure 4. Centering with the text-align property in Internet Explorer. Note how all the paragraph text within the div is now also centered.

Note

It's important to note that margins with negative values are a completely legitimate use of CSS. Using negative margins can solve a range of design needs, such as allowing certain element boxes to overlap.

This means having to write additional rules to correct the problem and return text to its default, such as

 p {   text-align: left; } 

As you can imagine, this is a bit of a disadvantage. What's more, truly compliant browsers will not align the container, only the text.

Combining Margin and Text Alignment

Because of the backward compatibility available with text-alignment, and the broad contemporary support for the auto-margin technique, many designers combine the two for the ultimate cross-browser horizontal centering hack:

 body { text-align: center; } #container {    margin-left: auto;    margin-right: auto;    border: 1px solid red;    width: 168px;    text-align: left } 

Alas, still imperfect and still a hack. You'll have to write additional rules to manage text alignment. But now you've got pretty good results across browsers.

The Negative-Margin Solution

Challenged with centering Entomology, Hicks decided to go for an additional technique for centering: the use of negative margins.

The negative-margin solution to centering involves a bit more than just the use of negative margins, however. It's a combination of absolute positioning and a negative margin value.

Here's how it's done. First, a container is created, and positioned absolutely and offset by 50 percent left. Alone, this will cause the containing block's left margin to begin at 50 percent of the width of the page (FIGURE 5).

Figure 5. Absolutely positioning the containing block with an offset of 50 percent left.

Then, the container's left margin is set to a negative value of half of the containing element's width. This places the containing block smack in the horizontal center (FIGURE 6).

Figure 6. When a negative margin half of the element's total width is added, the box ends up centered along the horizon.

Here's the CSS from Entomology:

 #container {    background: #ffc url(mid.jpg) repeat-y center;    position: absolute;    left: 50%;    width: 760px;    margin-left: -380px; } 

Look Ma, no hacks! While not the preferred method, it's a great workaround, and support is very broad. Pretty impressiveeven Netscape Navigator 4.x supports this technique, so it's extremely useful when you have to support a wide range of browsers.

Staying Stylish

Trends come and go, but fixed designs will be with us for a long time to come. They provide a specific means of laying out Web pages and are part of any designer's toolbox.

Which approach you choose will depend upon your browser base and personal preferences, but as with Entomology, using negative margins and absolute positioning to address centering is a stylish option that works across a wide range of browserseven unexpected ones.

Note

Be careful with your math! Any padding or borders must be included in the width calculations, or you won't get the desired results.