Wrapper vs. none

[maxwelldm]

Very elementary question, which I could not find in the archives. I note that many sites have a wrapper div within which the whole page sits, while others do not. I would have thought that there is an "implicit" page upon which all the content resides, and that the wrapper is redundant, but the fact that it is used by many (but far from all) sites suggests that there must be some reason for it. (It just adds another layer of nesting of divs, presumably a bit more processing) Advice re. benefit/necessity?

[newseed]

A wrapper div is not required but it is helpful to contain all your other inner html codes. For example, let's say you have 3 divs...a header, content and a footer. You want them to each be 900px wide and centered. The html and css code would look like this:

 

HTML

<div id="header"></div>

<div id="content"></div>

<div id="footer"></div>

 

CSS

#header { width: 900px; margin: 0 auto;}

#content{ width: 900px; margin: 0 auto;}

#footer{ width: 900px; margin: 0 auto;}

 

You will have to apply the necessary css to each of the element to get them to be centered and have a fixed width.

 

Now here's what the code looks like when using a wrapper:

 

HTML

<div id="wrapper">

<div id="header"></div>

<div id="content"></div>

<div id="footer"></div>

</div>

 

CSS

#wrapper{ width: 900px; margin: 0 auto;}

#header { }

#content{ }

#footer{ }

 

As you can see you use far less css because the header, content and footer divs are block elements which expand the full width of whatever is containing it in which in this case the wrapper is the container. The wrapper then centers all html code contained within it.

[maxwelldm]

Eminently clear and explicit explanation - perfect. I thank you so much.