The Perfect Fluid CSS Layout

Sidebar

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>The Perfect Fluid CSS Layout</title>
 
<link rel="stylesheet" type="text/css" href="style.css">
 
</head>
<body>
 
<div id="wrap">
 
	<div id="inside">
 
		<div id="header">Header</div>
 
		<div id="left">Sidebar</div>
 
		<div id="right">
 
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur facilisis hendrerit sem, sed suscipit nibh congue non. Vestibulum gravida semper mi, ac aliquam enim posuere laoreet. Suspendisse a libero sed mauris sodales tempor at quis ipsum. Curabitur quis nulla ut velit pretium aliquet eu et ipsum. Nullam pharetra dignissim lectus nec tempus. In ante nulla, rutrum ut tincidunt commodo, imperdiet eget metus. Pellentesque varius, velit quis porta congue, lacus tortor tristique ante, eget scelerisque dolor arcu id nibh. Maecenas blandit convallis augue. Aenean ut erat elit. In sed augue sed mi imperdiet eleifend non quis odio. Nulla hendrerit massa id nibh scelerisque eget imperdiet lacus viverra. Praesent porta egestas justo, eu laoreet nibh porta vitae. Morbi faucibus fermentum tortor, at sagittis risus molestie sed. Vestibulum pellentesque porttitor turpis, convallis suscipit turpis congue sit amet. Mauris quis imperdiet massa. Proin fringilla volutpat quam quis egestas.</p>
 
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id dolor in erat iaculis pharetra. Sed varius ultrices placerat. Vestibulum venenatis pretium ullamcorper. Quisque laoreet volutpat diam, sollicitudin pretium mauris sodales quis. Quisque fermentum cursus purus ut porta. Nulla facilisi. Cras fermentum augue nec dolor vehicula ut mattis neque facilisis. Cras eu neque vitae augue scelerisque ultrices. In tincidunt faucibus ante, id luctus diam porta id. Pellentesque elit nulla, venenatis at rhoncus eget, pellentesque non lectus. Nulla ac dictum ligula. Fusce odio ligula, euismod eget luctus nec, aliquet quis nunc. Vestibulum in magna eget ante rhoncus sagittis a in lorem. Duis egestas, metus sed consequat ultrices, nulla diam malesuada dui, et sagittis mauris mi sit amet diam. Donec facilisis vulputate pulvinar.</p>
 
		<p>Fusce aliquet scelerisque leo sit amet porttitor. In hac habitasse platea dictumst. Donec eleifend ligula eu lacus convallis lacinia rhoncus ipsum dictum. Morbi enim diam, iaculis a laoreet vitae, consectetur et est. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec et molestie nibh. Donec in orci neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque vel varius dui. Sed non felis quam. Duis auctor nisl id odio vestibulum nec fermentum nisl interdum. Donec sapien elit, scelerisque eget ultricies in, suscipit nec sem. Aliquam aliquam aliquet lorem, a rutrum ante lobortis ac. Etiam nec leo libero. Nam tincidunt pharetra nisl at ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam at risus nunc. Quisque id porttitor odio. Integer mollis volutpat nibh hendrerit iaculis. Vestibulum et libero ipsum.</p>
 
		</div>
 
		<div id="footer">Footer</div>
 
	</div>
 
 
 
</div>
 
</body>
</html>

*{margin:0;padding:0;}
 
body {
	text-align:center;
	background-color: #cccccc;
}
 
#wrap {
	text-align:left;
	margin: 10px auto;
	min-width: 780px;
	max-width: 1260px;
}
 
#wrap #inside {
	margin: 10px 10px 0px 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}
 
#header {
	background-color: blue;
	padding-top: 20px;
	padding-bottom: 20px;
}
 
#left {
	width: 150px;
	float: left;
	padding-left: 15px;
	padding-top: 20px;
 
}
 
#right {
	padding-left: 210px;
	padding-top: 20px;
	background: url('http://wildreason.com/perfect-fluid-css-layout/sidebar.png') repeat-y green;
}
 
#footer {
	background-color: red;
	padding-top: 20px;
	padding-bottom: 20px;
}