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: thevar
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.
The best thing to do is to grab Firebug, and begin analyzing others web sites. You’ll begin to see the trend on how divs are used across several sites.
.-= Wayne John´s last blog ..The poll results are in, web development it is =-.
What is Firebug ? Thanks in advance.
Check here: http://getfirebug.com/
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.
Thanks! From your post, now I know why they called it “wrapper”
.-= John Wesley´s last blog ..Hello world! =-.
I must confess that this is a great and very useful information to me. Thank you so much for this.
.-= Uche Nwaobi´s last blog ..Improve Usability of Your Website =-.
Thanks for the explanation, I usually use master or main, although using wrapper div makes my code easier and more clear.
COngratulations for the post.
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.
I think any name that makes sense to you and is self-explanatory works fine.
Paul’s post cleared the misunderstanding I had about the wrapper class. thanks a million times.
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.
Thanks for the post; it is very helpful!