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" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></meta>
<style>
.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;
}
</style>
</head>
<body>
	<div class="container">
		<div class="header layout">Header</div>
		<div class="navigation layout">
			Navigation<br />Navigation<br />
		</div>
		<div class="main layout">
			Content<br />Content<br />Content<br />
		</div>
		<div class="footer layout">Footer</div>
	</div>
</body>
</html>

Output
https://bharatonjava.files.wordpress.com/2012/09/layout.jpg

Advertisements

, , ,

  1. Leave a comment

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: