Basic page layouts

• 1 column
• 2 column - narrow/wide
• 2 column - wide/narrow
• 2 column - 50/50
• 3 column - narrow/wide/narrow
• multi layout

Building the skeleton of a page can often be the first stumbling block in putting together a website. Here is a basic methodology for piecing together a one-, two-, or three-column page. The html works for both fixed and fluid layouts, and is structured in a way that makes it easy for html non-experts to begin building their sites. For more complex layouts, try The 960 Grid System or 960.gs.

The CSS

Fixed page grid css | Fluid page grid css

The Structure

• The Page: #hd.page-head, #bd.page-body, #ft.page-foot

  I begin the structure of a page with a really basic layout. The #hd div usually contains the global nav, the #bd contains the meat of the page, the #ft is for the usual contact and copyright links.

  Why the id and the class? Extra css hooks give us options if there's ever need to skin the page

• The Column Wrapper: lyt-1col, lyt-2col-a, lyt-2col-b, lyt-2col-c, lyt-3col

  The column wrapper determines the number and width of each column. The classname is the second class on #bd.

  Why are there 3 versions of the 2-column layout? Many sites have multiple variations of a 2-column page; the homepage might have a wide left and narrow right, while the sub-pages might be narrow left and wide right. Another option for structuring the CSS is to have one class lyt-2col and to modify that class with a second one that determines the column widths.

  Why aren't these IDs? This method of page layout allows for multi types of layouts on one page. So you might have a lyt-1col followed by lyt-2col-a, followed by another lyt-1col.

• The Columns: col-a, col-b, col-c

  These three classes work in each Column Wrapper

  What's the col-bc thing all about? I'm using the same markup for both fluid- and fixed-width layouts. In the lyt-3col layout, I found it necessary to wrap the middle and right columns in col-bc in order to make the middle column fluid.

• The Modules: mod

  Modules are a good way of structuring and organizing your content. Discrete chunks of content should each be wrapped in a module.

  In building a fluid layout, modules are key to making the layout work.

  Because of their uniform structure, modules can be moved or copied from column to column without changing any of their markup.

  For more about modules, see my presentation on module structure and use.

Fixed & Fluid Layout

• Why is the fluid layout maxed out at 960px? One approach for fluid layouts is to let the page stretch as far as the browser can, but I've limited this fluid layout to 960px. Why create a fluid layout then? So that users with smaller resolution monitors won't get a scrollbar until <800px. Most web designers don't create pages for browsers bigger than 1024px, and text stretched into one long line becomes difficult to read. So this fluid layout goes from 774px to 960px. It's easy to alter the dimensions of the page and columns in the CSS if you're looking for a layout wider than 960px.
• The fluid layout doesn't work in IE6: IE6 doesn't recognize min- or max-width. Because IE6 is becoming a smaller and smaller percentage of global web usage, I decided to keep the layout fixed. I'm okay with IE6 users having a slightly altered experience as long as the site still functions.

Multiple Layouts on One Page

• Within the #bd section of the page, you can have multiple kinds of layouts stacked on top of each other.
• What about nesting? If you alter the math (widths, margins, etc.) of the css, you should be able to place layouts inside of layouts. Make sure to namespace your css (.lyt-2col-a .lyt-2col-b .col-b {}).