Wednesday, 6. September 2006, 04:35:42
By
Andy Budd with Cameron Moll and Simon Collison Fixed-width, liquid, and elastic layoutSo far
(in the previous article), all the examples have used widths defined in pixels. This type of layout is known as fixed-width layout, or sometimes "ice layout" due to its rigid nature. Fixed-width layouts are very common as they give the developer more control over layout and positioning. If you set the width of your design to be 720 pixels wide, it will always be 720 pixels. If you then want a branding image spanning the top of your design, you know it needs to be 720 pixels wide to fit. Knowing the exact width of each element allows you to lay them out precisely and know where everything will be. This predictability makes fixed-width layout by far the most common layout method around.
However, fixed-width designs have their downsides. First, because they are fixed, they are always the same size no matter what your window size. As such, they don't make good use of the available space. On large screen resolutions, designs created for 800 600 can appear tiny and lost in the middle of the screen. Conversely, a design created for a 1024 760 screen will cause horizontal scrolling on smaller screen resolutions. With an increasingly diverse range of screen sizes to contend with, fixed-width design is starting to feel like a poor compromise. Another issue with fixed-width design revolves around line lengths and text legibility. Fixed-width layouts usually work well with the browser default text size. However, you only have to increase the text size a couple of steps before sidebars start running out of space and the line lengths get too short to comfortably read.
To work around these issues, you could choose to use liquid or elastic layout instead of fixed-width layout.
Liquid layouts
With liquid layouts, dimensions are set using percentages instead of pixels. This allows liquid layouts to scale in relation to the browser window. As the browser window gets bigger, the columns get wider. Conversely, as the window gets smaller, the columns will reduce in width. Liquid layouts make for very efficient use of space, and the best liquid layouts aren't even noticeable.
However, liquid layouts are not without their own problems. At small window widths, line lengths can get incredibly narrow and difficult to read. This is especially true in multicolumn layouts. As such, it may be worth adding a min-widthin pixels or ems to prevent the layout from becoming too narrow.
Conversely, if the design spans the entire width of the browser window, line lengths can become long and difficult to read. There are a couple of things you can do to help avoid this problem. First, rather than spanning the whole width, you could make the wrapper span just a percentage—say, 85 percent. You could also consider setting the padding and margin as percentages as well. That way, the padding and margin will increase in width in relation to the window size, stopping the columns from getting too wide, too quickly. Lastly, for very severe cases, you could also choose to set the maximum width of the wrapper in pixels to prevent the content from getting ridiculously wide on oversized monitors.
Be aware that IE 5x on Windows incorrectly calculates padding in relation to the width of the element rather than the width of the parent element. Because of this, setting padding as a percentage can produce inconsistent results in those browsers.
You can use these techniques to turn the previous fixed-width, three-column layout into a fluid, three-column layout. Start by setting the width of the wrapper as a percentage of the overall width of the window. In this example I have chosen 85 percent as it produces good results on a range of screen sizes. Next, set the width of the navigation and content areas as a percentage of the wrapper width. After a bit of trial and error, setting the navigation area to be 23 percent and the content area to 75 percent produced nice results. This leaves a 2-percent virtual gutter between the navigation and the wrapper to deal with any rounding errors and width irregularities that may occur:
1#wrapper {
2 <strong>width: 85%;</strong>
3}
4
5#mainNav {
6 <strong>width: 23%;</strong>
7 float: left;
8}
9
10#content {
11 <strong>width: 75%;</strong>
12 float: right;
13}
You then need to set the widths of the columns in the content area. This gets a bit trickier as the widths of the content divs are based on the width of the content element and not the overall wrapper. If you want the secondaryContent to be the same width as the main navigation, you need to work out what 23 percent of the wrapper is in terms of the width of the content area. This is 23 (width of the nav) divided by 75 (width of the content area), multiplied by 100—which works out at around 31 percent. You will want the gutter between the content columns to be the same width as the gutter between the navigation and content areas. Using the same method, this works out to be around 3 percent, meaning that the width of the main content area should be 66 percent:
1#mainContent {
2 <strong>width: 66%;</strong>
3 float: left;
4}
5#secondaryContent {
6 <strong>width: 31%;</strong>
7 float: right;
8}
This produces a liquid layout that is optimal at 1024 780 but is comfortable to read at both larger and smaller screen resolutions (see Figure 7-6).
Figure 7-6. Three-column liquid layout at 800x600, 1024x768, and 1152x900Because this layout scales so nicely, there isn't any need to add a max-width property. However, the content does start to get squashed at smaller sizes, so you could set a minimum width of 720pxon the wrapper element if you liked.
Elastic layoutsWhile liquid layouts are useful for making the most of the available space, line lengths can still get uncomfortably long on large resolution monitors. Conversely, lines can become very short and fragmented in narrow windows or when the text size is increased a couple of steps. If this is a concern, then elastic layouts may be a possible solution.
Elastic layouts work by setting the width of elements relative to the font size instead of the browser width. By setting widths in ems, you ensure that when the font size is increased the whole layout scales. This allows you to keep line lengths to a readable size and is particularly useful for people with reduced vision or cognitive disorders.
Like other layout techniques, elastic layouts are not without their problems. Elastic layouts share some of their problems with fixed-width layouts, such as not making the most use of the available space. Also, because the whole layout increases when the text size is increased, elastic layouts can become much wider than the browser window, forcing the appearance of horizontal scroll bars. To combat this, it may be worth adding a max-width of 100% to the body tag. max-width isn't currently supported by IE 6 and below, but it is supported by standards-complaint browsers such as Safari and Firefox.
Elastic layouts are much easier to create than liquid layouts as all of the HTML elements essentially stay in the same place relative to each other; they just all increase in size. Turning a fixed-width layout into an elastic layout is a relatively simple task. The trick is to set the base font size so that 1em roughly equals 10 pixels.
The default font size on most browsers is 16 pixels. Ten pixels works out at 62.5 percent of 16 pixels, so setting the font size on the body to 62.5%does the trick:
1body {
2 font-size: 62.5%;
3}
Because 1em now equals 10 pixels at the default font size, we can convert our fixed-width layout into an elastic layout by converting all the pixel widths to em widths:
1#wrapper {
2 <strong>width: 72em;</strong>
3 margin: 0 auto;
4 text-align: left;
5}
6
7#mainNav {
8 <strong>width: 18em;</strong>
9 float: left;
10}
11
12#content {
13 <strong>width: 52em;</strong>
14 float: right;
15}
16
17#mainContent {
18 <strong>width: 32em;</strong>
19 float: left;
20}
21
22#secondaryContent {
23 <strong>width: 18em;</strong>
24 float: right;
25}
This produces a layout that looks identical to the fixed-width layout at regular text sizes (see Figure 7-7), but scales beautifully as the text size is increased (see Figure 7-8).
Figure 7-7. Elastic layout at the default text size
Figure 7-8. Elastic layout after the text size has been increased a few timesElastic-liquid hybridLastly, you could choose to create a hybrid layout that combines both elastic and liquid techniques. This hybrid approach works by setting the widths in ems, then setting the maximum widths as percentages:
1#wrapper {
2 width: 72em;
3 <strong>max-width: 100%;</strong>
4 margin: 0 auto;
5 text-align: left;
6}
7
8#mainNav {
9 width: 18em;
10 <strong>max-width: 23%;</strong>
11 float: left;
12}
13
14#content {
15 width: 52em;
16 <strong>max-width: 75%;</strong>
17 float: right;
18}
19
20#mainContent {
21 width: 32em;
22 <strong>max-width: 66%;</strong>
23 float: left;
24}
25
26#secondaryContent {
27 width: 18em;
28 <strong>max-width: 31%;</strong>
29 float: right;
30}
On browsers that support max-width, this layout will scale relative to the font size but will never get any larger than the width of the window (see Figure 7-9).
Figure 7-9. The elastic-liquid hybrid layout never scales larger than the browser window.Liquid and elastic imagesIf you choose to use a liquid or an elastic layout, fixed-width images can have a drastic effect on your design. When the width of the layout is reduced, images will shift and may interact negatively with each other. Images will create natural minimum widths, preventing some elements from reducing in size. Other images will break out of their containing elements, wreaking havoc on finely tuned designs. Increasing the width of the layout can also have dramatic consequences, creating unwanted gaps and unbalancing designs. But never fear—there are a few ways to avoid such problems.
For images that need to span a wide area, such as those found in the site header or branding areas, consider using a background image rather than an image element. As the branding element scales, more or less of the background image will be revealed:
1#branding {
2 height: 171px;
3 background: url(images/branding.png) no-repeat left top;
4}
5
6<div id="branding"></div>
If the image needs to be on the page as an image element, try setting the width of the container element to 100% and the overflow property to hidden. The image will be truncated so that it fits inside the brandingelement but will scale as the layout scales:
1#branding {
2 width: 100%;
3 overflow: hidden;
4}
5
6<div id="branding">
7 <img src="images/branding.png" width="1600" height="171" />
8</div>
For regular content images, you will probably want them to scale vertically as well as horizontally to avoid clipping. You can do this by adding an image element to the page without any stated dimensions. You then set the percentage width of the image, and add a max-width the same size as the image to prevent pixelization.
Remember that max-width only works in more modern browsers such as Safari and Firefox. If you are concerned about the image pixelating in older browsers, make the image as large as you will ever need it to be.
For example, say you wanted to create a news story style with a narrow image column on the left and a larger text column on the right. The image needs to be roughly a quarter of the width of the containing box, with the text taking up the rest of the space. You can do this by simply setting the width of the image to 25% and then setting the max-width to be the size of the image—in this case 200 pixels wide:
1.news img {
2 <strong>width: 25%;</strong>
3 <strong>max-width: 200px;</strong>
4 float: left;
5 padding: 2%;
6}
7
8.news p {
9 width: 68%;
10 float: right;
11 padding: 2% 2% 2% 0;
12}
As the news element expands or contracts, the image and paragraphs will also expand or contract, maintaining their visual balance (see Figure 7-10). However, on standards-complaint browsers, the image will never get larger than its actual size.
Figure 7-10. Giving images a percentage width allows them to scale nicely in relation to their surroundings.Faux columnsYou may have noticed that the navigation and secondary content areas on all these layouts have been given a light gray background. Ideally the background would stretch the full height of the layout, creating a column effect. However, because the navigation and secondary content areas don't span the full height, neither do their backgrounds.
To create the column effect, you need to create fake columns by applying a repeating background image to an element that does span the full height of the layout, such as a wrapper div. Dan Cederholm coined the term "faux column" to describe this technique.
Starting with the fixed-width, two-column layout, you can simply apply a vertically repeating background image, the same width as the navigation area, to the wrapper element (see Figure 7-11):
1#wrapper {
2 background: #fff url(images/nav-bg-fixed.gif) repeat-y left top;
3}
Figure 7-11. Faux fixed-width columnFor the three-column fixed width layout, you can use a similar approach. This time, however, your repeating background image needs to span the whole width of the wrapper and include both columns (see Figure 7-12). Applying this image in the same way as before creates a lovely faux two-column effect (see Figure 7-13).
Figure 7-13. Faux three-column effectCreating faux columns for fixed-width designs is relatively easy, as you always know the size of the columns and their position. Creating faux columns for fluid layouts is a little more complicated; the columns change shape and position as the browser window is scaled. The trick to fluid faux columns lies in the use of percentages to position the background image.
If you set a background position using pixels, the top-left corner of the image is positioned from the top-left corner of the element by the specified number of pixels. With percentage positioning, it is the corresponding point on the image that gets positioned. So if you set a vertical and horizontal position of 20 percent, you are actually positioning a point 20 percent from the top left of the image, 20 percent from the top left of the parent element (see Figure 7-14).
Figure 7-14. When positioning using percentages, the corresponding position on the image is used.This is very useful as it allows you to create background images with the same horizontal proportions as your layout, and then position them where you want the columns to appear.
To create a faux column for the navigation area, you start by creating a very wide back-ground image. In this example, I have created an image that is 2000 pixels wide and 5 pixels high. Next you need to create an area on the background image to act as the faux column. The navigation element has been set to be 23 percent of the width of the wrapper, so you need to create a corresponding area on the background image that is 23 percent wide. For a background image that is 2000 pixels wide, the faux column part of the image needs to be 460 pixels wide. Output this image as a GIF, making sure that the area not covered by the faux column is transparent.
The right edge of the faux column is now 23 percent from the left side of the image. The right edge of the navigation element is 23 percent from the left edge of the wrapper element. That means if you apply the image as a background to the wrapper element, and set the horizontal position to be 23 percent, the right edge of the faux column will line up perfectly with the right edge of the navigation element.
1#wrapper {
2 background: #fff url(images/nav-faux-column.gif) repeat-y 23% 0;
3}
You can create the background for the secondary content area using a similar method. The left edge of this faux column should start 77 percent from the left edge of the image, matching the position of the secondaryContent element relative to the wrapper. Because the wrapper element already has a background image applied to it, you will need to add a second wrapper element inside the first. You can then apply your second faux column background image to this new wrapper element.
1#wrapper2 {
2 background: url(images/secondary-faux-column.gif) repeat-y 77% 0;
3}
If you have worked out your proportions correctly, you should be left with a beautiful three-column liquid layout with columns that stretch the height of the wrapper (see Figure 7-15).
Figure 7-15. Faux three-column layoutSummaryIn this chapter you learned how to create simple two- and three-column fixed-width lay-outs using floats. You then learned how these layouts could be converted into liquid and elastic layouts with relative ease. You learned about some of the problems associated with liquid and elastic layouts and how liquid images and hybrid layouts can help solve some of these problems. Lastly, you saw how to create full height column effects on both fixed-width and liquid layouts, using vertically repeating background images. This chapter touched on some of the techniques used to create CSS-based layouts. However, there are a lot of techniques out there, enough to fill a whole book of their own.
One of the big problems developers face with CSS layouts is that of browser inconsistency. To get around browser rendering issues, various hacks and filters have been created. In the next chapter, you will learn about some of the better-known hacks and how to use them responsibly.
This content is excerpted from,
"CSS Mastery: Advanced Web Standards Solutions", authored by
Andy Budd with Cameron Moll and Simon Collison. The content represents pages 141 to 152, from the chapter, "Layout". The book is published by
friends of ED, © copyright 2006 by Andy Budd, Cameron Moll, and Simon Collison. All rights reserved. Reprinted with permission. ISBN 1590596145).
WIDGETIZE