<div id="floater">

<div id="main">

This is the main content div. It floats in the center of the browser window without using tables. This is accomplished by using only the following CSS.

html, body {
	height: 100%;
}

#floater {
	float: left;
	height: 50%;
	margin-bottom: -250px;
	width: 100%;
	background: pink;
}

#main {
	clear: both;
	height: 500px;
	margin: auto;
	width: 366px;
	background: aqua;
}

The width of the floater div can be set to 1px and the main div's clear will make sure main stays below it. The width is set to 100% here only so that the pink div is visible.