CODEWITHSUNDEEP
htmlcss
stivlo
stivlo

Reputation: 85476

Is the body wrapping div really necessary?

A popular technique to build a set fixed centered layout is wrap everything in the body in a div and set some CSS rules on it, for example:

<body>
    <div id="wrap">
        all content here
    </div>
</body>

#wrap { width: 850px; margin: 0 auto; }

I was wondering, if there is a reason to add this extra wrapping div, since setting the same CSS rules on the body works. Is it for compatibility with some browsers or just a tradition?

Upvotes: 4

Views: 4199

Answers (5)

Monique48149
Monique48149

Reputation: 1

Using body element as a page wrapper but results errors if body also contains a grid

I noticed the following when body is simultaneously a wrapper with a certain width and also contains a grid. For example, you give the body a grid, then this grid comes out to the right outside the body, but only with a very narrow screen window. That would be a reason to use another div as an additional wrapper. So give the body 100vw width and then give the wrapper the corresponding grid. Am I right about that? I would like to discuss this here. Also possible in German

Upvotes: 0

Martin Chen
Martin Chen

Reputation: 1

To add the extra wrapper enables the body and div to change independently.

Upvotes: 0

Rob
Rob

Reputation: 15160

No. You do not need a "wrapper" div that so many use because they saw others do so. Use the body for that as you should. Setting CSS properties on the body was a problem in the past but not any longer.

Upvotes: 6

ldiqual
ldiqual

Reputation: 15365

If you need a specific background for the whole page and a centered container, you can't do otherwise. It also provides a way to use "layers" like lightboxes that need to blur the whole #wrap content.

Upvotes: 0

SpoonNZ
SpoonNZ

Reputation: 3829

It might work in some browsers, I don't think it'll work in all of them. Also, it's quite common to set a background on the body, then a separate one on the wrap.

Upvotes: 1

Related Questions