Question

I know that an empty div is not hmmm entirely semantical. But I was wondering if it’s okay to use it with a background image to create a nicely styled dropshadow or other effects to decorate a ‘parent’ div.

(Also I know how I can do this with CSS3 but for obvious reasons this won’t always do the trick)

Answer 1

If you want to leave the html as clean as possible the very best thing to do would be to, well… to leave it alone and use CSS. How? CSS gives you a way to add [pseudo]elements into the html with two special selectors: :after and :before. Take a look at this fiddle: http://jsfiddle.net/joplomacedo/ubG5t/

The css, if you can’t see it in the fiddle, looks like the following:

body:after {
  content: " ";
  display: block;
  /* your styles */
}

There’s not much to it. What it does is insert at the very end of the body element (still inside of it), a [pseudo]element with a display of block – just like a div. You can give it it whichever styles you like – again, it’s just like having a regular div [1*]

The content thing is there to make it work. You can put some text inside of it, which will appear in the box, or you can just leave it empty like I did – but it needs to be there, otherwise, no div for you.

*1 – well, transitions don’t really work with it, but apart from that…