body {
	margin: 10px 0;	/* Adjust margins as needed */
}
#bounding-container {
	position: relative;	/* This is just to assist with any relative positioning or z-indexing below */
	width: 780px;		/* Fixed width */
	margin: auto;		/* Center it */
}
#contents-container {
	overflow: hidden;	/* This is part of getting colums to have equal display height; see below */
}
#contents-col {
	float: right;		/* Here in lies the trick: by floating this and the left colum to the right, they naturally flow in reverse order ;-) */
	/* This div started with a width of 580px ( 780px - 200px ), but had to be reduced to account for borders and padding below */
	width: 557px;		/* The width is also crucial to get things positioned correctly using the float property */
	/* If adding borders, be sure to shave off the width of the borders from the width of the div */
	/* If adding padding, be sure to shave off the width of the left and right padding from the width of the div */
	padding: 10px;		/* Padding is pretty much always called for here, eh? */
	/* This trick is used to get the colums displaying at equal length. The value for X is the largest */
	margin-bottom: -20000px;  /* X */
	padding-bottom: 20010px;  /* X + padding-bottom */
}
#nav-col {
	float: right;		/* Same as with the contents-col div */
	width: 200px;		/* Again, same as above, only if this is changed, remember to change the width of the contents-col */
	/* This trick is used to get the colums displaying at equal length. The value for X is the largest */
	margin-bottom: -20000px;  /* X */
	padding-bottom: 20000px;  /* X + padding-bottom */
}
#footer {
	position: relative;
	clear: both;		/* Clear the floats in the above two columns */
}