jmosbech · August 24, 2013 19:50
diff --git a/centered-with-footer.html b/centered-with-footer.html
 <!DOCTYPE html>
 <html>

 <head>

 <style>
 html {overflow-y: scroll;}
 body, html {height: 100%; padding:0; margin:0;}
 #main {
  min-height: 440px;
 	height: 100%;
 }

 header {
 	width: 100%;
 	line-height: 100px;
 	background: grey	;
 }

 footer { 
 	line-height: 100px; 
 	background-color: black; 
 	color: white;
 	width: 100%;
 	margin-top: -100px;
 }

 #roulette {
 	height: 200px;
 	width: 400px;
 	position: absolute;
 	top: 50%;
 	left:50%;
 	margin-top: -100px;
 	margin-left: -200px;
 	background-color: red;
 }

 @media screen and (max-height: 420px) {
 	#roulette {top: 220px; background-color: blue;}
 }

 </style>

 </head>

 <body>

 	<div id="main">
 		<header>header</header>
 		<div id="roulette"></div>
 	</div>

 	<footer>footer</footer>

 </body>
 </html>