Content container's shadow displaying differently ???

[j4mes_bond25]

I'm trying to add "shadow" (which is in fact, an image) effect behind the border of my "centerContent" (i.e. the area where the main description text lies).

Presently looking page can be seen on:

http://allinclusivewebdesign.byethost13.com/AllInclusiveWebDesign/about.php

The related CSS code is:

#centerContentContainer
{
	width:100%;
}

#centerContentShadow
{
	background:url(content-shadow.jpg) #FFFFFF;
	width:760px;
	float:left;
}

#centerContent
{
	background:url(contentbackground.jpg) #FFFF00;
	color:black;
	text-align:center;
	position:relative;
	width:700px; 
	margin-left:30px;
	float:left;
	border-left:1px solid #999999;
	border-right:1px solid #999999;
}

And to display it within each html files, I've got:

<div id="centerContentContainer">
<div id="centerContentShadow">
<div id="centerContent">

Now, the problem is, it looks differently in my Firefox & Internet Explorer browser. In Firefox it displays perfectly well (except the "bottomMenu"), as it can be seen from:

http://allinclusivewebdesign.byethost13.com/AllInclusiveWebDesign/AllInclusiveWebDesign/about.php

while in Internet Explorer this "centerContent" drags down.

In addition, in Firefox AND Internet Explorer, my "bottomMenu"'s width gets change to the same width as the "centerContent" itself rather than the 100% width, as it was displaying earlier (http://allinclusivewebdesign.byethost13.com/AllInclusiveWebDesign/about.php)

I wonder if anyone around could possibly point me in the right direction to get the desired output, since all I want is just the shadow image displaying behind the "centerContent" i.e. around the left & right border.