• reduce mark up
• increased separation of content and presentation
• improved accessibility
• forward compatibility
• save bandwidth
• easy maintence

let's look at ben forta's blog. he was nice enough to say I could you his site for this example.

here we go.

use valid xhtml and structured html.

We use the appropriate tags for the content. <h1> for headings and <p> for text. we will use style sheets to make it pretty.

we divide the xhtml into sections. the header, sidebar, content, footer.

#header { background-color: #ccc; }
#sidebar { background-color: #999; }
#content { background-color: #fff; }
#footer { background-color: #eee; }

we'll float the sidebar navigation to the right side of the page like a column.

#sidebar {
	float: right;
	width: 25%;
	background-color: #999;
	}

put a margin on the content div to make the sidebar look like a column.

#content {
	background-color: #fff;
	margin-right: 25%;
	}

let's move the content closer to the top. if viewed in a browser that doesn't support styles we won't have to scroll forever to get to the good stuff.

we float the content to the right and give it a width of 72% to make a gutter.

since we change the structure of the doc we'll need to adjust our css

#content {
	float: left;
	width: 72%;
	background-color: #fff;
	}

we'll fix that.

#sidebar {
	float: left;
	width: 25%;
	background-color: #999;
	}
#content {
	float: right;
	width: 72%;
	background-color: #fff;
	}

let's add some color.

body {
	margin: 0;
	padding: 0;
	background: #363;
	color: #000;
	font-family: Verdana, Arial, Helvetica, sans-serif
	}
#header {
	/*background-color: #ccc;*/
	}
#sidebar {
	float: left;
	width: 25%;
	/*background-color: #999;*/
	}
#content {
	float: right;
	width: 72%;
	background-color: #fff;
	padding: 10px 0 10px 10px;
	margin: 0 10px 0 0;
	}
#footer {
	clear: both;
	/*background-color: #eee;*/
	text-align: right;
	}

let's style the links in the local navigation.

#sidebar {
	float: left;
	width: 25%;
	font-size: 90%;
	/*background-color: #999;*/
	}
#sidebar p{
	font-weight:bold;
	color: #ffffff;
	text-align: center;
	}
#sidebar form{
	font-weight:bold;
	color: #CCCCCC;
	}
#sidebar a{
	font-weight:bold;
	color: #CCCCCC;
	}
#sidebar a:hover{
	font-weight:bold;
	color: #FFFFFF;
	}
#sidebar td{
	color: #CCCCCC;
	}

we'll format the header to look like the old one.

#header {
	/*background-color: #ccc;*/
	}
#header ul {
	display: inline;
	} 
#header ul li {
	margin-left: 0;
	padding: 0 10px;
	border-right: 1px solid #cccccc;
	list-style: none;
	display: inline;
	}  
#header a{
	font-weight:bold;
	color: #cccccc;
	text-decoration: none;
	} 
#header a:hover{
	font-weight:bold;
	color: #ffffff;
	}
#header h1 {
	float: left;
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	width: 150px;
	height: 65px;
	background: transparent url(../images/drk_grn_logo.png) top left no-repeat; /*relative to css file*/
	display: block;
}
#header h1 a {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	text-decoration: none;
	background: transparent url(../images/drk_grn_logo.png) top left no-repeat;
	}
#header p{
	color: #cccccc;
	font-size: 10pt; 
	font-weight: bold; 
	text-align: right;
	background-color: #000000;
	border-bottom: 1px solid #ffffff;
	padding: 10px;
	margin: 0 0 15px 0;
	}

we'll make the content smaller so it's harder to read.

body {
	margin: 0;
	padding: 0;
	background: #363;
	color: #000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	}

add a div to disclaimer

.disclaimer p{
	font-size: 80%;
}

we'll format the calendar

#sidebar table{
margin: 10px;
background-color: #FFFFFF;
}
#sidebar table td {
color: #336633;
}
#sidebar table td a {
	font-weight: bold;
	color: #3366cc;
	}
#sidebar table td a:hover {
	font-weight: bold;
	color: #000000;
	}

when window is adjusted we can 'lose' the local navigation. time to wrap it up and make final adjustments. it also looks 'boxy.'

#wrapper	{
	margin: 0;/* auto;*/
	padding: 0;
	border: 0;
	width: 700px;
	text-align: left;
	}

look ma only one table and it's for the calendar.

tables aren't evil. they are great for displaying tubular data, not as a layout tool.