How to layout html page using divs

This is a common thing to layout a html page template before writing any web application. Options here are using a TABLE or use DIVs. Tables are simple but divs are a little tricky. Heres how you do this

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></meta>
.container {
	border: 1px solid red;

.layout {
	border: 1px solid #999966;

.footer {
	clear: both;

.navigation,.main {
	border-style: none solid;

.navigation {
	float: left;
	width: 150px;
	background: #E6EEEE;

.main {
	margin-left: 150px;
	background: #BFFFBF;
	<div class="container">
		<div class="header layout">Header</div>
		<div class="navigation layout">
			Navigation<br />Navigation<br />
		<div class="main layout">
			Content<br />Content<br />Content<br />
		<div class="footer layout">Footer</div>



, , ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: