Using a wrapper/container div: Why?

Get Started
1

I’ve usually seen that most websites use a general div called “wrapper” or “container”.

What I just usually do is style the body element instead since it’s more semantic.

Is there a valid reason why this is used? Is it a browser compatibility issue?

2

Hi there,

One reason would be to enable more sophisticated CSS styling.
Some browsers don’t support certain properties on the body, for example width and max-width, so a container div is used which can be centered, have borders applied to it or whatever.
Also, if you want to place content outside of your container div (copyright notice, for example), then this is no problem. You cannot, however, place content outside of the body.

A second reason would be for convenience when specifying elements in CSS and JavaScript, as you can refer to an element’s parent, without having to add an id or class to each child.

E.g.

div#container h1 {...}
div#container p {...}

Or:

var kids = document.getElementById("container ").childNodes;

This question is also discussed here: http://stackoverflow.com/questions/354739/why-should-i-use-a-container-div-in-html and here: http://www.webteacher.ws/2005/02/01/494/

HTH

3

If you use a wrapper div, you can have one background for the body and something different for the wrapper.
You can use negative margins to push things out over the edge of the wrapper.
Add shadows etc to the wrapper to make it sit “above” the body and its background.

Basically it’s just more flexible when you add a wrapper div.

4

That makes sense, I just wish browsers like that would pick up to things like this. Thanks for your reply.

I see, but I’ve been able to do the same by just styling the html element (although I’m not sure if this causes a cross browser issue, could never check for IE). Thanks for your reply anyway.

5

If I didn’t use a wrapper element then how would I style the part of the body that is outside the wrapper?

The body is the entire web page - the wrapper is the part of the page that contains the actual content. With today’s wide screens if someone opens their browser full screen web pages would become unusable if they didn’t limit their width (about 30 or 35 em is the maximum width for a readable column so you’d need lots of columns of data to actually fill the width of a widescreen monitor with usable content.Far easier to use a wrapper around your content that allows a background to display on either side once the viewport is wider than would allow the content to be readable if it filled the entire width.

Semantically the body and the page content are two different things and so you should have a tag for each. <body> and <div id=“wrapper”> are the simplest versions to represent each of them.

6

I use the ‘container’ to make it have a max-width, align in the center of the page and then I can create the separate styling for various types of devices (am coding responsive now). You need such things to be able to style said div and also other elements inside. And then other divs inside it and so on :slight_smile: