HTML <div> tag

The <div> tag defines a division or section in a page and makes it easy to manage, style, and manipulate those divisions or sections. Browsers usually place a line break before and after the div element.  Use the <div> tag to group block-elements to format them with styles. Some examples would be the basic layout of this page.

Things to remember about the <div> tag:

  • The <div> tag is a block-level element.
  • The <div> tag can contain almost any other element.
  • The <div> tag can NOT be inside a <p> tag.
  • Label your <div> tags as you place them in your page. Example, if you're defining the main content area of your site, you should name that <div> tag: "content". <div id="maincontent"> OR <div id="leftsidebar">
  • Make sure when you open the <div> tag, you close it </div> BEFORE adding your content.
  • If you nest your <div> tags, make sure you know where your content for each of the <div>s is going (in other words, which <div> it should be part of). This is where it may pay you to add comments to your HTML code so you can tell where each <div> begins and ends.
    Example:
    <!--Main content begins here -->
    Your content
    <!--Main content ends here here -->

This site uses <div> tags for the page layout. Each is styled by using an id and applying the style rules. Remember an id is used only once on a page. The <div> tags and what they are used for are:

  • <div id="outerWrapper"> is the container for the entire page content.
  • <div id="header"> is the container for the masthead.
  • <div id="contentWrapper"> is the container for the content area which include the navigation and content area.
  • <div id="arrowlistmenu"> contains the left side navigation and is floated to the left.
  • <div id="content"> contains the main content area.
  • <div id="footer"> contains the footer area.

Of course <div> tags can be used for other things like the box below which does not have a width in the style rules so is contained only by the content <div>.  

News 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus accumsan dolor ac orci? Pellentesque vitae libero in lacus tincidunt ultricies! Nam eleifend ultricies dui! Quisque mattis tempus ligula. Nulla non diam in arcu adipiscing porttitor. Nulla libero mi, suscipit id, semper eu, lobortis non, metus! Sed dui pede, consectetuer vitae, adipiscing et, posuere quis, nulla. Mauris ornare semper justo. Morbi at libero ut justo ultrices dignissim? Cras nunc. Sed metus quam, consequat vel, euismod et, pulvinar ut, sem. Vestibulum euismod massa posuere massa.

This <div> has a width added to the style which contains it to 50% of the allowable space.

News 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus accumsan dolor ac orci? Pellentesque vitae libero in lacus tincidunt ultricies! Nam eleifend ultricies dui! Quisque mattis tempus ligula. Nulla non diam in arcu adipiscing porttitor. Nulla libero mi, suscipit id, semper eu, lobortis non, metus! Sed dui pede, consectetuer vitae, adipiscing et, posuere quis, nulla. Mauris ornare semper justo. Morbi at libero ut justo ultrices dignissim? Cras nunc. Sed metus quam, consequat vel, euismod et, pulvinar ut, sem. Vestibulum euismod massa posuere massa.

You could add a different class with different style rules that would give a different look to the div on the same page.

My thanks to Jennifer McKemie who was the inspiration for this tutorial. Example of what you can do with a <div>. The example layout does not do well at 800x600 resolution because of the image included in the center <div>. I no longer design for anything lower than 800x600 BUT the page you are looking at will resize so that it does not fall apart at an even lower resolution. That is because the container uses a percentage width as does each <div> except the left navigation.

Troubleshooting Floating <div>'s by Barry Carlson

 If you have ever run into problems when floating divs such as a div getting pushed down, then the following may be of use. The problems associated with various versions of Internet Explorer browsers when floating divs and how to correct them are also dealt with. Taming the Float Attribute.


Copyright 2008 Pat Geary of Expression Web Tips, Tutorials, and Templates All Rights Reserved