A simple html page template

This example is a ridiculously simple web page layout template which contains the 3 basic building blocks of a web page: the header, the main content area, and the footer. The rest are up to your imagination and creativity to make it a more fancy web page.

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>A simple html template</title>
<meta name="Keywords" content="A simple html template" />
<meta name="Description" content="A simple html template" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

<style>
#pageheader 
{
 width:100%;
 height:100px; 
 background-color:black;
 text-align:center;
 font-size:18pt;
 color:white;
}

#mainContent
{
 margin-left:10%;
 margin-right:10%;
 width:80%
 font-size:18pt;
 overflow:hidden;
}

#left-col
{
	float:left;
	width:10%;
	background-color:yellow;
	margin-bottom: -99999px; 
	padding-bottom: 99999px;
}

#main-col
{
	float:left;
	width:70%;
	height:600px;
	text-align:center;
	font-size:18pt;
	background-color:#eee;
	margin-bottom: -99999px; 
	padding-bottom: 99999px;
}

#right-col
{
	float:left;
	width:20%;
	background-color:yellow;
	margin-bottom: -99999px; 
	padding-bottom: 99999px;
}

#pagefooter
{
 width:100%;
 height:120px; 
 background-color:black;
 text-align:center;
 font-size:18pt;
 color:white;
}
</style>
</head>

<body>

<div id="pageheader">
This is the page header, where you could put your logo, navigation menu, search bar, login and login links.
</div>

<div id="mainContent">
<div id="left-col">
This is the left col, where you could put a side menu.
</div>
<div id="main-col">
This is the main col, where you put the main contents.
</div>
<div id="right-col">
This is the right col, where you could put some side contents, widgets, plugins, advertisements.
</div>
</div>

<div id="pagefooter">
This is the footer.
</div>

</body>

</html>

Search within Codexpedia

Custom Search

Search the entire web

Custom Search