Use YUI Grids CSS to create an arbitrary page width.
YUI Grids CSS offers three ways to control your page layout. These examples show how to control the page width, one of the three types of control. You can use Grids to just set page width or combine this feature with Grids' Preset Templates and/or Nesting Grids.
YUI Grids sets the page width on a
div that wraps the entire page. By setting the
id of the
div you can choose your page width. Here are the included options:
div#doccreates a 750px page width.
div#doc2creates a 950px page width.
div#doc3creates a 100% page width. (Note that the 100% page width also sets 10px of left and right margin so that content had a bit of breathing room between it and the browser chrome.)
div#doc4creates a 974px page width, and is a new addition to Grids in YUI version 2.3.0.
In addition to the four pre-defined page widths listed above, we've made it easy to customize the page width too. Divide your desired pixel width by 13; the result is your width in ems for all non-IE browsers. Take the em width you just calculated and multiply it by .9759 to find the width in ems for IE.
This example showcases using
div#custom-doc to create a 600px page width.
Copyright © 2009 Yahoo! Inc. All rights reserved.