Style: Contemporary - Website Template Tutorial

View Demo
This is a pretty funky layout! I was just having some fun one day and it turned out pretty cool! It has a min-width in all browsers including IE6 - so it won't break!
<!DOCTYPE HTML><html><head><meta charset="UTF-8">
<title>Style: Contemporary - website Template Demo</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
fieldset, table {
	border: none;
}
html {
	height: 101%;
}
body {
	height: 100%;
	min-width:990px;
	background:#D5EAF9;
}
h1 {
	padding: 15px;
}
h2 {
	margin: 10px 0 0;
}
p {
	margin: 0 0 1em;
}
#wrapper {
	height: 100%;
}
#header { 
	height: 200px; 
	margin: 15px 0 0;
	text-align: center;
	background:#fff;
	box-shadow:0 0 3px #555;
}
#content {
	position: absolute;
	top: 135px;
	left: 30px;
	width: 705px;
	height: 450px;
	background:#fff;
	box-shadow:0 0 3px #555;
}
#innercontent {
	padding: 40px;
}
#right { 
	float: right;
	margin: -170px 55px 0 0;
	width: 200px;
	height: 590px;
	text-align: center;
	background:#fff;
	box-shadow:0 0 3px #555;
}
#footer {
	position: absolute;
	left: 0;
	top: 550px;
	height: 50px;
	margin: 0;
	width: 90%;
	text-align: center;
	min-width:850px;
	background:#fff;
	box-shadow:0 0 3px #555;
}
</style> 
<!--[if IE ]>
<style type="text/css">
#wrapper { 
   width: expression( document.body.clientWidth < 810 ? "809px" : "auto" );
}
</style>
<![endif]-->
</head>

<body>
<div id="wrapper">

<div id="header">
<h1>Style: Contemporary - website Template Demo</h1>
<p><a href="style-contemporary.php">&laquo; Back To Tutorial</a></p>
</div>

<div id="right">
<h2>Nav</h2>
</div>

<div id="content">
<div id="innercontent">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
<p>Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. In interdum vulputate lectus. Aenean libero elit, eleifend id, tincidunt id, tristique eu, tortor. Pellentesque urna dolor, placerat a, pharetra eget, congue ut, ligula. Sed mi. Nunc volutpat. Donec pharetra accumsan lacus. Integer pede orci, vehicula vitae, porttitor id, pulvinar vel, nisi. Aliquam mauris ligula, eleifend sit amet, eleifend sit amet, luctus at, turpis. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra.</p>
</div>
</div>

<div id="footer">
<h2>Footer</h2>
</div>

</div>
</body>
</html>
ADVERTISE HERE