How to Use a Wrapper Div

A wrapper or container div on a web page is used for several purposes. In this article I will explain some of the reasons to use a wrapper div.

Difficulty: Moderate

Instructions

Things You'll Need:

• A web page
• A style sheet for your web page

1. 
   HTML showing a wrapper div

   A web page may use one or more div elements that are used as wrappers or containers. These divs may have various IDs, including "wrapper" and "container," but are not restricted to these IDs. The divs are identified with an ID or CLASS so that style rules can be applied to them in a style sheet. Here you see an example of where DIV ID="WRAPPER encloses the entire contents of a web page.

2. The purpose of enclosing an entire page's contents in a wrapper is so that margins and borders and other presentation decisions can be applied to the entire page. Here, for example, is the CSS rule that would center and set a zero pixel margin at the top and bottom of the page for the div pictured in the step above:
   body div#wrapper {
   margin:0 auto;
   }

3. Another reason for using a wrapper div is to group elements for presentation purposes. For example, you might want a wrapper around the navigation elements on the page—perhaps with a visible border or some padding. Or you might want to float the navigation element to the right or left. By enclosing the navigation in a wrapper div with an ID like "NAV" or "GLOBALNAV" you create a container. That container can be styled according to your needs.

4. Wrapper divs are also used to create layouts with CSS. Columns can be created inside an outer wrapper div using inner divs with identities such as "nav" and "content." Here, for example, is CSS that can create a two-column layout.
   
   * Note: there are many ways to create a two-column layout, this is just one example.
   
   #wrapper {
   position: relative;
   }
   #nav {
   width: 20%;
   position: absolute;
   left: 10px;
   top: 40px;
   }
   #content{
   width: 70%;
   margin-left: 25%;
   }

5. Wrapper divs can group HTML elements semantically. You've seen examples of this with div names such as "content" and "nav." In the HTML shown in Step 2, you saw a semantic div wrapper for a "header" element. Wrapping elements that relate to each other structurally and semantically in a div is the actual purpose of the div element in HTML. A div is nothing more than a generic container that you use to create structure and presentation hooks.

Tips & Warnings

• Using an ID to identify a div element gives you a CSS hook for styling purposes, but it also creates a unique element that can be targeted with JavaScript effects.