Style 2 Instructions

This style illustrates a simple layout using a table cell with bgcolor defined for a solid color.


  1. Start off by defining a table with 2 cells and one row. This will give you two columns, a sidebar column and your content column.

  2. The sidebar cell will have a NOWRAP attribute set this time, but no width attribute. This lets the sidebar cell resize to fit the widest text line. You will need to add <BR>'s as needed.

    You can always make it wider by adding a few non-breaking spaces (&nbsp;) to the end of your longest menu item. Or you could insert a dotclear image as we used in style 1.

  3. The sidebar cell also has the BGCOLOR attribute set to the color you desire. You can set BGCOLOR in each cell if you like as for a nice effect like that seen on Hortico's homepage.

  4. No spacer column is needed here since we use the main table's CELLSPACING and/or CELLPADDING attributes to add some space between text and around cells.

  5. Now fill in your logo, sidebar links and text, and content and you're good to go. (after testing of course)

See example 2a for the basic style 2 and examples 2b and 2c for some variants.

This style has several advantages:

  • The sidebar is resizable to fit the text, regardless of the font sizes set in the user's browser. Text won't be wrapped strangely for some users but not others.
  • Since it can be implemented completely in html without images, it can be kept very small for quick loading.
  • This design is easy to modify to use a sidebar on the right or sidebars on both left and right.