• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 6. Advanced Page Layout > A Robust Fluid Layout

A Robust Fluid Layout

Converting the fixed-width layout to a fluid center column layout involves a number of changes to the markup. Here are the three main changes.

  1. Most notably, you must remove all the width:774px declarations off the containers, since they now have to change size as the browser width changes. Without an explicit declaration, the containers default to width:auto, which is just what you want.

  2. You also need to change from the floating method of arranging the columns to the relative/absolute technique. Absolutely positioned elements (the side columns, in this case) use the positioning context of their closest absolutely positioned ancestor (the column container). By using the top and left settings for the left column and the top and right settings for the right column, you can move the columns up into the top corners of their respective containers.

    One big advantage of this method of positioning the side columns is that you can now reorganize the markup so that the center column with the page content comes first; the side columns are absolutely positioned, so it doesn't matter where they appear in the markup. There are two benefits to doing this. First, users with disabilities, who might be using a screen readeror non-mouse navigation device to step through the markup, will encounter the content immediately. Second, search engines tend to rank content that is placed near the top of the markup highest, so this arrangement can help your content rank higher in search engines.

  3. The new fluid layout has some constraints on just how fluid it can be. Fluid sizing is definitely user friendly, because the layout can be adjusted to match the available screen real estate. The problems with fluid layouts, however, are that, by narrowing the browser window, the user can either crush the content until the side columns overlap and the content disappears or stretch the browser so wide that text lines become very long. Both of these options make it hard for the user's eye to move from the end of one line to the start of the next. By constraining the maximum and minimum widths to which the layout can size, you give the user the benefits of a fluid layout, while avoiding these two problems.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint