Search code examples
cssbackgroundfooterbackground-repeat

How do I make my css class footer go from the left to right side of the screen?


My CSS class footer does not expand the entire bottom of the page. It works properly if the browser window is small enough, but if the window is large enough the right and left side end and the page background is visible. The class is not nested in another class and its only parents are the and tags. Here is the css for footer:

.Footer { width: 100%; padding:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background-color:#d9d9d9;}
.Footer p { color:#959595; padding:0; margin:0; font:normal 10px 'Verdana';}
.Footer a { color:#959595; text-decoration:underline;}

The page is up at avidest.com so you can see what I mean. Any help would be appreciated. Thanks.


Solution

  • Move the Footer block outside of your main container, bgRasize, and it should span the width of the page. It's currently 100% width of it's container.

    <div class="bgRasize">
      ... other content
    </div>
    
    <div class="Footer">
      ... footer content
    </div>