File Under: CSS, HTML, Templates
Feb
15
2010

Blank HTML Document With Left Nav

By

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>

<head>

<meta 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>
Tags: