Free HTML page template with centered wrapper, header and a footer that sticks to the bottom of the web browser window | HTML-Assets.com: HTML-Assets.com: free HTML, PHP and javascript assets, HTML/PHP/Javascript code snippets and free HTML/PHP/Javascript source code

This is a free standard HTML skeleton page template produced by Chris Strom, LLC. It includes a centered page wrapper, a header area and a footer that automatically sticks to the bottom of the browser frame, regardless of page height. It provides a great HTML skeleton source code framework for building web pages.

This HTML page template source code is licensed under a Creative Commons Attribution 3.0 license.

HTML Page Template

Example:

Click here to see an example

Source Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

@charset "utf-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family:Arial, Helvetica, sans-serif;
	vertical-align: baseline;
}

:focus {
	outline: 0;
}

em {
	font-style:italic;
}

strong {
	font-weight:bold;
}

html, body {
	margin:0;
    height: 100%;
	font-family:Arial, Helvetica, sans-serif;
}

#wrapper {
	margin:0 auto;
	padding:0;
	position: relative;
	width:960px;
	min-height: 100%;
	font-family:Arial, Helvetica, sans-serif;
	background: blue;
}
	
	#header {
		width:960px;
		height:135px;
	}
	
	.clear-float {
		display: block;
		height: 0px;
		width: 1px;
		font-size: 1px;
		margin: 0;
		padding: 0 0 85px 0;
		clear: both;
		}
	
	#footer {
		position:absolute;
		bottom:0;
		height:70px;
		width:100%;
		text-align: center;
		background:red;
	}
	
		#footer ul {
			list-style:none;
			margin-bottom:10px;
		}
		
			#footer ul li {
				display:inline;
			}
			
				#footer ul li a {
					font-size:10px;
					text-transform:uppercase;
					text-decoration:none;
					border-right: 1px solid #193642;
					padding: 0 10px;
				}
				
					#footer ul li a.right {
						border-right:none;
					}
					
					#footer ul li a:hover, #footer ul li a.active {
						text-decoration:underline;
					}
		
		#footer p {
			font-size:10px;
		}
		
			#footer p a{
				font-size:10px;
				text-decoration:none;
			}
			
				#footer p a:hover {
					text-decoration:underline;
				}

</style>

</head>

<body>

</div>

</body>
</html>

HTML-Assets.com: free HTML, PHP and javascript assets, HTML/PHP/Javascript code snippets and free HTML/PHP/Javascript source code

HTML Page Template

Example:

Source Code:

Quick Links: