Fixed Width Layout Demo

What is This Page About?

This page uses a fixed width layout. That is, the main body (where this paragraph lies) has a width of 730 pixels regardless of how wide your browser window is. It serves as a demo page for the following tutorials:

To see the full effect of such a fixed width layout, where pixels is used as the unit of measure, try shrinking your browser window. You will notice that if you resize it so that it is smaller than 730 pixels, you can no longer see everything in the window and will have to use the horizontal scroll bar to scroll left and right to read each line.

For a deeper discussion of such a fixed width layout, please see the articles listed above. In addition, if you want to take a look at a page with a relative width layout, just go to any of the articles mentioned. All of thesitewizard.com's articles use relative widths for the right column. Resize your browser window for those articles to compare the effect with this page.

Technical Details

If you are familiar with CSS, the actual code used to create the fixed width for this page is as follows:

div.fixedwidth {
  width: 730px ;
}

Those who use one of my Dreamweaver tutorials to design their website can switch to a fixed width layout by using my tutorial on How To Change To A Fixed Width Layout Template In Dreamweaver instead.

Linking to This Page

It will appear on your page as:

Fixed Width Layout Demo (Using Pixels for Width Measurements)

Other Pages on This Site

 
Copyright © 2015-2018 by Christopher Heng. All rights reserved.
thesitewizard™ and fbdemo™ are trademarks of Christopher Heng.
This page was last updated on 24 April 2018.