<<Back to Article

Blank HTML Document With Left Nav

/skill level/
/viewed/
0 Times

This is a blank HTML document with a header, footer, a main content area and separate column for navigational elements on the left. If you want to make a web page with a simple two-column layout, copy and paste this code into a text editor and start typing your awesome content. 


<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>My Web Page</title>
	
	<style type="text/css">
		* { margin: 0; padding: 0; }

		html { height:100%; }

		body {
		text-align: left; 
		width: 100%;
		height: 100%;
		font-size: 62.5%; 
		font-family: Helvetica, arial, sans-serif;
		color: #000;
		background: #fff;
		margin: 0;
		border: 0;
		padding: 0; }

		a { color:#007ca5; text-decoration:none; outline: none; }
		a:visited { color:#666; } 
		a:active { color:#999; } 
		
		.left_col a { color:#fff; text-decoration: none; outline: none; }
		.left_col a:hover { color:#fff; text-decoration: underline; outline: none; }
		.left_col a:visited { color:#fff; } 
		.left_col a:active { color:#fff; }

    
		img, a img { border-style: none; }
	
		h1, .h1 { font-size: 2.4em; }
		h2, .h2 { font-size: 2em; } /* 20pt */
		h3, .h3 { font-size: 1.8em; } /* 18pt */
		h4, .h4 { font-size: 1.6em; } /* 16pt */
		h5, .h5 { font-size: 1.4em; } /* 14pt */
		h6, .h6 { font-size: 1.1em; } /* 11pt */

		.small { font-size: .9em; }

		.clearer { clear:both; }

		.header {
			text-align: left;
			background: #4f0f00;
			color: #fff;
			width: 980px;
			margin: 0 0 0 0;
			border: 0;
			padding: 10px;
			overflow: hidden;
			}

		.left_col {
			text-align: left;
			float: left;
			background: #007ca5;
			color: #fff;
			width: 160px;
			height: 600px;
			margin: 0 0 0 0;
			border: 0;
			padding: 10px;
			overflow: hidden;
			}
	
		.main_col {
			text-align: left;
			float: right;
			background: #fff;
			color: #000;
			width: 800px;
			height: 600px;
			margin: 0 0 0 0;
			border: 0;
			padding: 10px;
			overflow: hidden;
			}

		.footer {
			text-align: left;
			background: #eceae1;
			color: #000;
			width: 980px;
			margin: 0 0 0 0;
			border: 0;
			padding: 10px;
			overflow: hidden;
			}
			
		.wrapper {
			text-align: center;
			width: 1000px;
			margin-left: auto;
			margin-right: auto;
			}
			

	</style>

</head>
<body>

  	<div class="wrapper">

		<div class="header">

			<br />
			<h1>Header content goes here</h1>
			(980px wide + 10px padding)
		
			<br /><br />

		</div>


		<div class="left_col">

			<h5>Left column content goes here</h5>
			(160px wide + 10px padding)

		</div>

		<div class="main_col">

			<h2>Main content goes here</h2>
			(800px wide + 10px padding)

		</div>


		<br class="clearer" /">


		<div class="footer">

			<span class="small">
				Tiny footer content goes here
				<br />
				(980px wide + 10px padding)
			</span>

		</div>
	
  	</div>
  
</body>
</html>
Retrieved from "http://www.webmonkey.com/codelibrary/Blank_HTML_Document_With_Left_Nav"
  • This page was last modified 04:33, 15 May 2008.
Edit this article
Reddit Digg