Box Shadow Doesnt go on Entire Wrapper

Question

Im Using

.shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

To add a shadow to my #Wrapper. For some reason it only travels to the end of my menu. Can anyone see why in this example http://www.kerrydean.ca/MATHESON/home5.html

Thanks!!

Answer 1

The issue is that you've got floated content inside of non-floated content. You need a clearfix.

Alternatively, you could float your #Wrapper element, but you can't center a floated element with margins. Here's an example:

<style type='text/css'>
  #Wrapper {
    margin: 0 auto;
    width: 799px;
  }

  #Page {
    float: left
  }
</style>

[ snip... ]

<div id='Wrapper'>
  <div id='Page' class='shadow'>
    [ The rest of your content goes here. ]

Your footer is also going to cause problems because you moved it via relative positioning. Get rid of that and give it a 10px top margin, and you should be all set.