/* CSS Document */


/* first lets set the margins to zero so we dont have a strange white border around our page. */
body {
	margin: 0px;
}

/* setting a width that will work on 800x600 with a vertical scrollbar, and centering it in the viewport, the border is completely optional */
#pageContainer {	
	width: 750px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid black;
}

/* we'll need this page div to be positioned relative because we're going to be doing absolute positioning later. You could also use position: static, as long as there's a defined position, otherwise the absolute element will position from the next container out, which in this case is the viewport. */
#page {
	width: 750px;
	position: relative;
}

/* make a simple header, set it's width to the width of its container, minus the horizontal padding */
#header {
	position: relative;	
	width: 730px;
	background-color:#0066FF;
	color: white;
	font-size: 20px;
	height: 100px;
	padding: 10px;
}

/* our relative header is pushing the content div, which will contain our 2 column. This way we can change our header height later and it wont be a problem, except we'll have to adjust our let column height along with it.  */
#content {
	position: relative;	
	width: 750px;
}

/* absolute position the left column. We can get away w/ this if the left column is something like an ad, or a navigation where we know that the height is going to be smaller than the content. The width should be whatever width you want, minus the horizontal padding. You probably wont want a background-color here because it might break graphics continuity, but for the sake of showing the height of the column I've left it in*/
#left {
	width: 80px;
	position: absolute;
	left: 0px;
	top: 0px;
	background-color: #CCCCCC;	
	height: 500px;	
	padding: 10px;
}

/* the right column holds the content, and pushes the footer. Set its width to it's container, minus the left column, minus the sum of it's horizontal padding */
#right {
	width: 630px;
	position: relative;
	margin-left: 100px;
	background-color: #000000;
	color: white;
	min-height: 500px;	
	padding: 10px;
}

/* simple footer, centered in the page, again, set its width to the width of the container minus the horizontal padding */
#footer {
	width: 730px;
	position: relative;
	height: 20px;
	background-color: #66FFFF;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
}