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.
<!--Main content begins here -->
<!--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>.
This <div> has a width added to the style which contains it to 50% of the allowable space.
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