Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using the body element as a page wrapper [closed]

Yesterday I had a discussion with my colleagues about using the body element as a wrapper to avoid something like div.page-margins or div.wrapper as a direct first child of the body element.

I like to use the body as a page wrapper and apply all sorts of styles like width, margin, positions etc. on it. With a quick search I found these two blog posts [1, 2] which confirm me.

My colleagues don't like the idea because there once were some problems (IE7 + page zoom) and they are used to use a div.wrapper inside body.

So my question is: Are there any code specific arguments against using the body element as a normal container element?

Addendum: Because we are defining best practices for our frontend team we want to get rid of some habits- and just using a div.wrapper because someone is used to this is one of those habbits :)

like image 329
Herr Paul Avatar asked Sep 15 '25 10:09

Herr Paul


2 Answers

In addition to the background-color reasoning provided by the others, the only other case I can think of where it is necessary to have the wrapper these days is to enforce a footer to "stick" to the end of the document (bottom of viewport when document is short). Aside from these cases, I can't think of a reason why the wrapper is required. I do know I've used a wrapper for as long as I can remember, so chances are your colleagues are like me - it's an old habit from the days when wrappers were necessary to avoid rendering bugs in aged browsers.

I would say it is still best practice to have a wrapper. This way if spec requirements change later on to require a full-window background color or fixed footer, you don't have to add the wrapper later and deal with moving the styles around a lot. After all, you're only talking about 21 extra bytes...

<body><div id="body">...</div></body>

I personally use wrapper on all the sites I manage as this allows me to have a background colour, for example grey as you can see here

I would be possible to do this with body but then you would have to set the background colour with html tag instead of body tag.

Really there is no right or wrong answer here it is just personal preferance but I find wrapper easier because then if you ask someone for help they can understand your code quicker.

In conclusion,

If you do not use a background colour then there should be absolutley no coding argument against using body.

If you use a background colour, then there is a small argument against it but it is really just personal preferance.

Hope this helps.

like image 37
Jack David Anderson Avatar answered Sep 17 '25 02:09

Jack David Anderson



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!