Tip: What is a Wrapper Div?

One of the listservs I read regularly recently had the question posted, “What is a wrapper?” This question is sometimes phrased, “What is a container?” An answer provided by Paul Novitski was so clear that I thought it might be a useful tip here. With Paul’s permission, here is his response to the question.

A wrapper is an element, commonly a div, that encloses one or more other
elements in the HTML markup, e.g.:

<div id="wrap">
<h1>Headline</h1>
<p>Paragraph</p>
<p>Paragraph</p>
</div>

The purposes of wrappers are several, including:

  • to group elements semantically, for instance to separate page heading
    from body text from sidebar from footer.
  • to group elements cosmetically, such as with a surrounding border or a
    common background image or color.
  • to group elements in layout, such as to keep them all in the same column
    when columns are floated next to one another.
  • to enable special positioning, as when a wrapper is given relative
    positioning in order to contain child elements with absolute positioning.
  • to make it more convenient to specify elements in CSS and JavaScript by
    referring to their parent, without having to id or class each child
    element, as in:
    div#wrap h1 {...}
    div#wrap p {...}
    var aKids = document.getElementById("wrap")
    .childNodes;

    (Note: the var above should all be on one line)

Some special effects require several nested wrappers, such as when a box is
given rounded corners. UPDATED: This is no longer true since the border-radius property has become supported in most browsers. A border for any element can be given rounded corners using border-radius.

13 thoughts on “Tip: What is a Wrapper Div?”

      1. firebug is a tool to identify the elements/contents of any webpage.
        * firebug is used in Mozilla Firefox browser.
        *firebug is identified by fire path.
        *it is just like Developer tools in other browsers (f12).

        ~ please correct me if am wrong.

  1. I prefer to use the term “container” to class or id my div it seems more clear than wrapper. Although I understand the concept of a wrapper, I wonder if there is more behind the use of that term than just its definition of containing other elements. I’ve read briefly that wrapper is also a Java class, so maybe it serves a purpose of association with Java and HTML…Not sure, but just a thought.

  2. Paul’s post cleared the misunderstanding I had about the wrapper class. thanks a million times.

    1. Im finding the wrapper helpful in creating layers of different columns. e.g. you can use the wrapper to create a row with 2 columns and the 2nd row with 3 columns.

Leave a Reply