3

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 :)

Herr Paul
  • 43
  • 1
  • 6
  • 1
    There are anomalies which you should be aware of before you start, like the background color, which in `body` gets applied to the whole window. Unless you set a background color for `html` too. Things like that. And compatibility with older browsers, like you said. Modern browsers all behave the same here, so that wouldn't be a problem. As long as you avoid Quirks mode or Compatibility modes! – Mr Lister Jul 24 '13 at 09:01
  • Thanks for your answer. Do you know any more anomalies? You said: > Things like that. So, are there any other problems (except background-color/ quirks mode/ compability modes). – Herr Paul Jul 25 '13 at 07:41
  • 1
    Many `body` properties get applied to the `html` instead of the body, if the html does not have those styles. `margin` and `border` spring to mind. But I couldn't find an exhaustive list, if that's what you're after. Sorry. – Mr Lister Jul 25 '13 at 10:53

2 Answers2

2

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>
  • A wrapper required for a footer? No, you can do the same thing with `body`. – Mr Lister Jul 24 '13 at 12:16
  • Thanks for your answer. My best practice is to avoid an additional wrapper- so now we have two best practices ;) I think it would be better to use as less markup as possible and as much as needed- so I would prefer to add the wrapper later if the requirements for the project would change :) – Herr Paul Jul 25 '13 at 07:47
1

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.

Jack David Anderson
  • 60
  • 7
  • Thanks for your answer. > 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. Yeah, I do this very often (applying a background-color to the html element)- so are there any problems/ difficulties with this? :) – Herr Paul Jul 25 '13 at 07:52
  • well none that I can think of. If you try running a test code through the w3c html validator (and also the css validator) you would be able to check if it is valid code. the addresses for the validators are: http://validator.w3.org/#validate_by_input and http://jigsaw.w3.org/css-validator/#validate_by_input Hope this helps! – Jack David Anderson Jul 25 '13 at 10:03