content-center-css.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>content-center-css</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
	/*
		this makes sure body takes up the whole browser window
	*/
}

body, div, td {
	background: #aabbcc;
	color: #000000;
	font: 10pt normal sans serif;
	line-height: 1.6em;
}

a {
	color: #000000;
	text-decoration: none;
}

a:hover {
	color: #000099;
}

#content {
	width: 400px;        /* chose your with, it could be em/%/ or whatever  */
	height: 200px;       /* chose your with, it could be em/%/ or whatever  */
	margin-left: -200px; /* this got to be equal (#content width / 2)       */
	margin-top: -100px;  /* this got ot be equal (#content height / 2)      */
	position: absolute; 
	left: 50%;           /* this and negative margin = the magic :)         */
	top: 50%;            /* this and negative margin = the magic :)         */
}

#inner {
	background: #ffffff;
	padding: 10pt;
	height: 100%;        /* restricts the #inner height */
	overflow: auto;      /* creates the scrollbar       */
}

#left {
	background: #990000;
	width: 100px;        /* chose your with, it could be em/%/ or whatever        */
	margin-left: -300px; /* this got to be equal (#content width/2) - #left width */
	margin-top: -100px;  /* this got ot be equal (#content height/2)              */
	position: absolute; 
	left: 50%;           /* this and negative margin = the magic :)               */
	top: 50%;            /* this and negative margin = the magic :)               */
}
</style>
</head>

<body>

<div id="content">

	<div id="inner">
		<h2>I'm in center :)</h2>
		<h3>#inner</h3>
		Vivamus nec sem. Integer in turpis. Morbi lobortis, turpis sed eleifend aliquet, tellus justo euismod urna, eget fringilla libero lorem eu odio. Suspendisse fringilla felis a eros vehicula luctus. Nunc lobortis. Quisque quam justo, luctus id, fermentum id, dictum a, ante. Aliquam mi. Donec urna urna, scelerisque eget, placerat et, bibendum tempor, quam. Nullam eu massa eget neque adipiscing mattis. Suspendisse diam massa, lacinia eu, malesuada at, consectetuer tincidunt, ipsum. Aliquam facilisis, libero at blandit facilisis, est ligula rutrum quam, non condimentum sem libero quis quam. Nulla nonummy. In imperdiet sapien pharetra nisi. Praesent eu ante. Maecenas mauris nibh, aliquet quis, volutpat nec, tristique eu, turpis. Nam mattis ullamcorper magna. Pellentesque ut lorem. Ut dictum metus vel arcu. Suspendisse a ligula.
	</div>

</div>

<div id="left">
	<h3>#left</h3>
	<br>this could be a menu
</div>

</body>


</html>