A Two-column Fixed-Width Floated-column Layout, Exercise 20 - adding our own navigation

This is a two-column fixed-width Floated column layout, centered in the browser window. This is one method of centering a layout.

Web designers like this kind of layout because it gives them more control over the presentation of information.

The css for the navigation at left looks like this:

#mainNav {width:180px;
		float:left;
		background-color:#ffc;
		margin:0; padding:0;
		line-height:normal;
}
#mainNav ul {margin:10px 0px;
		padding:0;
}

#mainNav ul li {margin:0;
			padding:0;
			list-style-type:none;
}

#mainNav ul li a {display:block;
			width:180px;
			padding:0 1px 4px 10px;
			font-weight:bold;
			text-decoration:none;
			background-color:#ffffcc;
			color: #999933;
}

html>body #mainNav ul li a {width:100%;
			padding:2px 2px 2px 15px;


}


#mainNav ul li a:hover {background-color:#CCCC66;
					color:#000;
}