Hey guys,

I'm by no means a CSS expert, so I'm wondering if someone can help me out here. On one of my pages I've got a DIV that's been centered vertically and horizontally. Here's the code I've got for that:

#outer {
  position: absolute;
  top: 50%;
  left: 0px;
  width: 100%;
  height: 1px;
  overflow: visible;
}

#inner {
  width: 530px;
  height: 353px;
  margin-left: -265px;  /***  w / 2   ***/
  position: absolute;
  top: -176px;          /***  h / 2   ***/
  left: 50%;
}

And then my content, HTML5 video which is 530x353, is in the respective DIVs.

Now what I want to do is add a drop shadow behind my video. I figure that the best way to do this is to simply make a graphic with one and add it as a background image that is centered. I tried to set it with background-image and background-position but I couldn't get it centered. I don't even know which DIV I should be putting it in, or if I should be making a new one.

Put the shadow on the div, or container, that holds the movie.
Why are you using absolute positioning?

Originally Posted by LadynRed

Put the shadow on the div, or container, that holds the movie.
Why are you using absolute positioning?

Do you mean a CSS shadow or my shadow graphic?

Also I just grabbed the code from the web.

Either type of shadow will work. Obviously support for CSS3 shadows isn't there yet for all browsers - most specifically IE.