Sidebars using tables are horrible. They are completely undesirable for people using text-based web browsers, people using screen readers, and people who wish to print a page from your web site. Using CSS and XHTML properly one can create sidebars that can be used well for these applications.

HTML code:

	
		
	
	
		

			
Main content region
			

				It is good practise to make the main content
				region the very first part of the body of a
				page. This makes the page very usable in 
				text-based browsers, hand-held devices, and in
				screen readers.
			
		
		

			
			
Navigation
			

				
Navigation link 1
				
Navigation link 2
				
Navigation link 3
				
Navigation link 4
				
			
		
		

			The first element after the columns must have the style
			"clear: both;" applied to it, or else either the
			content region or the side-bar may overlap it under 
			some conditions.
		
	


CSS code:
#content
{
	float: right;
	/* This float makes the content region lie on the right side of the
	 * page.
	 */

	margin-left: 17em;
	/* This margin-left makes room for the side-bar that will appear to the 
	 * left of the content region. It should be a value greater than or
	 * equal to the width of the side-bar, including its padding and border
	 * widths.
	 */
}

#navigation
{
	width: 15em;

	float: left;
	/* This float makes the side-bar lie on the left side of the page, 
	 * beside the content region.
	 */

	margin-right: -15em;
	/* This margin-right allows the side-bar to sit in the "margin space"
	 * to the left of the content region. It must be equal to the width of 
	 * the side-bar, including its padding and border widths.
	 */
}

.clear
{
	clear: both;
	/* This clear prevents any "floating" elements from appearing to the 
	 * left or right of this. This property is desirable for the first 
	 * element, if any, beneath the columns of the page, to prevent the
	 * columns from overlapping this element if they are too long.
	 */
}

/* To make the column appear on the right side, swap "left" for "right" and
 * the other way around, for all of this CSS code (i.e. float:right -> 
 * float: left, and margin-right -> margin-left)
 */