How to have a form consume 80% width of page, with a tables pixel width being greather than the equivalent of the forms pixel width?

Question

I have a webpage I'm trying to design and the content of the page will have a table layout. And with this table, they want it to be horizontally centered and consuming 80% of the window's width. I can get this with no problem, but the issue is that when I try to apply divs with background images around the table to give it a "drop shadow" effect they render on the edges of the window instead of the div that contains the table. It's like elements no longer expand to the width of their inner elements, but instead expand 100% of the windows width. I used to be able to do this about a year ago, but when I try to use the same technique today it seems like css has changed. Can someone please show me where I'm hopefully just missing something here. I'll include my markup so you can see what I'm working with.

body
{
    margin:0px;
}

div
{


}

div.outerContainer
{
    width:100%;

}

div.outerContainer div.sideImage
{
    position:absolute;

    height:600px;
    overflow:hidden;
}

div.outerContainer div.sideImage img
{
    border:0px;
}

div.tableContainer
{

    overflow:visible;

    height:100%;
}

div.shadowContainer div.leftShadow
{
    background: url(images/leftShadow.png) repeat-y;
    width:30px;
    height:100%;
    position:absolute;
    left:0px;
    margin:auto;

}
div.shadowContainer div.rightShadow
{
    background: url(images/rightShadow.png) repeat-y;
    width:30px;
    height:100%;
    position:absolute;
    right:0px;
    margin:auto;

}

table
{

    background-color:Maroon;
}

table tr td
{
    background-color:Silver;
}


table tr td div
{
    height:150px;
    width:420px;
}
</style>  


<div class="outerContainer">

    <div style="width:100%; height:100%;">
        <div class="sideImage" style="left:0px; width:10%" >
            <img alt="" src="images/SideImage.png" style="float:right;" width="200" height="600" />
        </div>

        <div class="sideImage" style="right:0px; width:10%">
            <img alt="" src="images/SideImage.png" style="float:left;" width="200" height="600" />
        </div>
    </div>

    <div class="shadowContainer" style="">
        <div class="leftShadow" style=""></div>
        <div class="rightShadow" style=""></div>

        <div class="tableContainer">

        <table cellspacing="1px">
            <tr>
                <td><div>&nbsp;</div></td>
                <td><div>&nbsp;</div></td>
                <td><div>&nbsp;</div></td>
            </tr>
            <tr>
                <td><div>&nbsp;</div></td>
                <td><div>&nbsp;</div></td>
                <td><div>&nbsp;</div></td>
            </tr>
            <tr>
                <td><div>&nbsp;</div></td>
                <td><div>&nbsp;</div></td>
                <td><div>&nbsp;</div></td>
            </tr>
            <tr>
                <td><div>&nbsp;</div></td>
                <td><div>&nbsp;</div></td>
                <td><div>&nbsp;</div></td>
            </tr>
            <tr>
                <td><div>&nbsp;</div></td>
                <td><div>&nbsp;</div></td>
                <td><div>&nbsp;</div></td>
            </tr>
        </table>
        </div>
    </div>
</div>