Box-Shadow is a funny thing. It works on all browsers but for some reason if I use it in my Body element in CSS it won't put a shadow around the body in IE and Chrome. Works fine in FF though. Also works fine on all browsers on the div's inside the body like my social column and article list.
I can't say 100% if it's bad practice, but in a way I feel like it is. It's a whole lot easier to create a wrapper that you can modify, etc. Plus if you wanna give your entire site a background color, you can't put the background on your body element.
It's funny because I have never even considered putting a width on the body tag. I wonder what kind of repercussions would come out of it... If nothing was wrong with it, would that not be the most semantic way to writing a wrapper?
Technically, it shouldn't be a problem to give the body a width and use that as the wrapper. Chris and Dave recently mentioned it on their podcast, as well. I'm not sure if it's a "safe" thing to do however, as in, if it works in all browsers and how far support goes.
I find it a bit of a funky way of doing things to be honest. If you change the background color of the body, then it will be applied to the entire page, not just the 1024-width body, yet the shadow is applied to the 1024-width area.
If you would use the "classic" way, with a wrapper div inside the body, you can't go wrong. That will also allow you to keep control over everything outside of the wrapper, in case you want to give the full-window page a background later on.
So I wouldn't say it's bad practice as such, but I personally prefer doing it with a wrapper div.
Here's my site: http://www.stfuandplay.com
view it in FF, Chrome and IE and you'll see what I'm talking about.
Here's my CSS for the body and the other divs:
body {
margin:0 auto;
width:1024px;
height:auto;
background:white;
box-shadow: 0 0 3px #000;
}
#content-left{
width:680px;
height:auto;
float:left;
margin-left: 7px;
margin-right:5px;
background:white;
box-shadow: 0 0 3px #000;
}
#social-column{
width:325px;
height:auto;
box-shadow: 0 0 3px #000;
position:inherit;
background:white;
float:left;
padding-top: 3px;
padding-left: 3px;
padding-bottom: 3px;
}
I find it a bit of a funky way of doing things to be honest. If you change the background color of the body, then it will be applied to the entire page, not just the 1024-width body, yet the shadow is applied to the 1024-width area.
If you would use the "classic" way, with a wrapper div inside the body, you can't go wrong. That will also allow you to keep control over everything outside of the wrapper, in case you want to give the full-window page a background later on.
So I wouldn't say it's bad practice as such, but I personally prefer doing it with a wrapper div.
Thanks!