View Full Version : Centering Div encased with drop shadow

Feb 13th, 2010, 10:55 AM
So I've got the main content (#thepage) div centered and working fine when I decided to add a nice drop shadow to it. So I have managed to do that :thumbsup: (minus the exception of not working in IE), but now the div is no longer centered on the page. :( Where is it screwing up? I think it may have somethign to do with the position: absolute on the .textbox class however if I change it, the drop shadow does not match up to the #thepage div.

You can view the website here: http://www.dniwebdesign.com/test/akenns_demo1/.

I have to stop working on these things before 4 am rolls around. lol

Feb 13th, 2010, 11:57 AM
Remove the absolute position and apply a width of 910px to the textbox div.

Feb 13th, 2010, 12:05 PM
To display a shadow around a fixed width div, you don't have to make a large image like http://www.dniwebdesign.com/test/akenns_demo1/imgs/shadow.png

Instead, just make a horizontal strip(of a height 1px or a little more) having a width which is slightly greater than the width of that <div>. Apply it as the background-image with repeat-y and add suitable padding(left & right) also to that <div>. For that bottom shadow, create another image and set it as the background of the "footer" section.

Feb 13th, 2010, 05:16 PM
Hello dniwebdesign,
Looks more like 918px, like this -
/* Shadowed images should not be made "block" for eliminating the baseline
space under the images, because this may trigger IE background bugs.
Instead, use "vertical-align: bottom;" for this purpose. */
.textbox {
/*position: absolute; AP once more... */
width: 918px;
margin: 0 auto;

Looks like you might have an extra </div> in there too.