Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

drop shadow applied to centered website



9:15 pm on May 27, 2007 (gmt 0)

5+ Year Member

I want to add a drop shadow to the entire centered website.
I found a code that puts the shadow around the whole site, yet off-centers the site. It also is not displayed in IE.
I was searching the web and the forum, yet couldn't find the answers (only for images/paragraphs shadows)
Any help is very much appreciated.
(For easier view I added the shadow css code in the HTML CODE)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="testcase2.css" rel="stylesheet" type="text/css" />
<style type="text/css" media="all">@import url(testcase2.css);</style>
<style type="text/css"><!--
.shadowMain, .shadowBLCorner, .shadowTRCorner{display:block;}
background:url(images/Bilder/shadow_04.gif)no-repeat right bottom;
background:url(images/Bilder/shadow_03.gif)no-repeat left bottom;}
background:url(images/Bilder/shadow_02.gif)no-repeat right top;
padding:0 30px 30px 0;}

<div class="shadowMain">
<div class="shadowBLCorner">
<div class="shadowTRCorner">
<div id="wrapper">
<div id="branding"><img src="images/banner6orange.jpg" class="orangebox"/></div>
<li><a href="#">#*$!#*$!#*$!x</a></li>
<li><a href="#">#*$!#*$!#*$!</a></li>
<div id="content">
<h1>Lorem ipsum dolor</h1>

<div id="rightcontent"></div>

<div id="footer"><span class="footerimg"><img src="images/tomleiste.jpg"/></span>
<p class="text">&copy;2007 AP, LLC </p>


* {
margin: 0;
padding: 0;
body {font: 62.5%/1.6 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
text-align: center;
min-width: 760px;
ul li{
ul a {display:block;
padding:0 2em;
ul a:hover {color:#fff;}
li {font-size: 1.4em;}
#wrapper {background-color: #ffcc99;
width: 720px;
margin: 0 auto;
text-align: left;

#branding {height: 50px;
background: #ccc url(images/bannertest.jpg);
background-repeat: no-repeat;
padding: 20px;}
.orangebox {position:relative;
#content {
width: 420px;
float: left;
#rightcontent {
width: 280px;
float: right;

#footer {
padding: 1px 20px;
clear: both;
#footer .footerimg{position:relative;
padding-top: 20px;
padding-bottom: 20px;

#rightcontent * {
padding-left: 20px;
padding-right: 20px;

#content * {
padding-right: 20px;
padding-left: 20px;

1. How can I keep my website centered?
2. How can I have the shadow displayed in IE?



7:47 am on May 28, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Hi KatrinR and welcome to webmasterworld,

what you are after is called "css faux column" try googling for it and you shoud get a farrly nice tutorial on the firt spot.

to center a wrapper div on IE and FFox you usually do

text-align: center; /* for ie - puts everything center page */

width: ###px; /* fixed width in px ex 760px */
margin: 0 auto; /* for standard compliant browsers - puts the div in the middle */
text-align: left; /* for ie - to fix the text align center */

hope this helps


6:01 pm on May 28, 2007 (gmt 0)

5+ Year Member

Hi Le_gber. My website is already centered using this method, yet I am not able to find a way to keep it centered when adding the drop shadow around it. In FF, after adding the shadow, the site aligns left. In IE6, the shadow is not even displayed (although the site stays centered).
I am looking for a reference or help on how to add a drop shadow around a centered website. Many thanks, Katrin


6:58 pm on May 28, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Hi KatrinR,

try removing the float:left from .shadowMain

Does this help?


8:11 pm on May 28, 2007 (gmt 0)

5+ Year Member

No, Le_gber -
It "re"centers the design, yet breaks apart/misaligns the shadow image(s).


8:34 pm on May 28, 2007 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

I don't know what method you are using for drop shadow, but here's another that I think should work:



So you set text-align:center for the body and margin:auto for the container div, and everything inside should follow suit.
I did not look are your code (its' too large for me), but it seems you're doing it a different and more complicated way.

The big trouble with this method though which likely why you are not using it, is I don't think it allows dynamic sizing... you'll have to fix a height and width.

[edited by: Xapti at 8:40 pm (utc) on May 28, 2007]


9:45 pm on May 28, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

KatrinR, what type of shadow do you want to apply on the design? Is it a shadow box (4 corners around your wrapper div) or only shadow on the side (right-left)?

If side shadow, the way to go is faux-colum, apply the background and shadow to the body tag and use a background-position of 50% to center it in the middle of the page.

If a relatively small box (400 or 600px square), I usually use a couple of empty spans to hold the data and position them absolutely in a relatively positionned div.

Something like the following

<div id="box">
<p>some text</p>
<span id="tl"></span><span id="tr"></span><span id="bl"></span>

and the CSS
#box{ position:relative; background:black url("bottom-right-image.jpg") 100% 100% no-repeat; }

#tl{ position:absolute; top:0; left:0; background:red url("top-left-image.jpg") 0 0 no-repeat; }
#tr{ position:absolute; top:0; right:0; background:green url("top-right-image.jpg") 0 0 no-repeat; }
#tr{ position:absolute; bottom:0; left:0; background:blue url("bottom-leftt-image.jpg") 0 0 no-repeat; }

if a bigger box with 4 side shadowed, use a mix of the two with faux column for the side and absolute pos for bottom and top


Featured Threads

Hot Threads This Week

Hot Threads This Month