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. As a result of this, this page is actually not mobile friendly.

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 specific code responsible for making the width fixed is as follows:

div.fixedwidth {
  width: 730px ;
}

If you want to see the full source (including extraneous code that centres the main column), just use the View Source facility in your browser. For your convenience, all the CSS for this page can be found in the <head> section (instead of being placed in external stylesheets).

 
Copyright © 2015-2024 by Christopher Heng. All rights reserved.
thesitewizard™ is a trademark of Christopher Heng.
This page was last updated on 18 April 2024.