HTML Divs

The Container Of All Elements

A div is a block display element that can contain any other element. Block display means that each div will be displayed below the previous one. Using div's is the preferred way to control site layout as opposed to using tables. You can use divs to group together different parts of your website, applying CSS properties to them. Lets look at an example.

Html Code:

<html>
<head>
	<title>My Web Page</title>
</head>
<body>

<div id="header" style="width:80%;height:45px;margin:0 auto;background: 
	#dadaff;padding:5px">
	
  <h2 style="float:left">Welcome To My Site</h2>

  <p style="float:right">
    <a href="">Home</a> | <a href="">My Vacation</a> | <a href="">Images</a>
  </p>

</div>

<div id="main" style="width:80%;margin:0 auto;background:#fff;padding:5px;color:#f00;
text-align:center;">

  <p>This is my latest site, I am using divs to control the layout of this site.</p>

  <p>I hope that you enjoyed it!</p>

</div>

<div id="bottom" style="width:80%;margin:0 auto;padding:5px;background:#dadaff">
 
 <p>Thank's for Visiting</p>

</div>

</body>
</html>

Browser Display:

Welcome To My Site

Home | My Vacation | Images

This is my latest site, I am using divs to control the layout of this site.

I hope that you enjoyed it!

Thank's for Visiting

As you can see, a div can hold all sorts of other elements. With the proper use of div elements and CSS you can achieve just about any design or layout you want. In the above example I used the CSS style attribute in each div tag. In a practical example you would use a style sheet with the CSS properties applied to the id name of the tag.

Lets go ahead and give you a little taste of using CSS to apply these styles. We will apply the CSS for this next example using the style tag in the head of the web page to achieve the same effect as earlier.

HTML Code:

<html>
<head>

  <title>My Web Page</title>

  <style type="text/css" >
	
	#header {
		width: 80%;
		height: 45px;
		margin: 0 auto;
		background-color: #dadaff;
		padding: 5px;
	}

	#main {
		width: 80%;
		margin: 0 auto;
		background-color: #fff;
		padding: 5px;
		color: #f00;
		text-align: center;
	}

	#bottom {
		width: 80%;
		margin: 0 auto;
		background-color: #dadaff;
		padding: 5px;
	}

  </style>

</head>

<body>

<div id="header">
  <h2 style="float:left;">Welcome To My Site</h2>
  <p style="float:right;">
    <a href="">Home</a> | <a href="">My Vacation</a> | <a href="">Images</a>
  </p>
</div>

<div id="main">
  <p>This is my latest site, I am using divs to control the layout of this site.</p>
  <p>I hope that you enjoyed it!</p>
</div>

<div id="bottom">
  <p>Thanks for Visiting</p>
</div>

</body>
</html>

Browser Display:

Welcome To My Site

Home | My Vacation | Images

This is my latest site, I am using divs to control the layout of this site.

I hope that you enjoyed it!

Thank You for Visiting

As you can see, applying styles this way keeps the html a lot cleaner. By separating the CSS styles from the html you can control the layout and style of your web pages without having to go through each element on each web page. The only further improvement to putting the CSS in the head of the page is to put it in a separate file and link to it. This way you can link all the pages on your site to this one file and make site-wide changes from one place.

For more information on CSS, read our CSS tutorials.

HTML Tutorials