Why isn't the footer going all the way from left to right?

The background of my css class footer does not go across the entire width of the browser depending on how wide I keep the browser. It is making the page look odd because the footer is ending before the main content ends. The site is up at avidest.com so you can see what I'm referring to. Here is the css:

.Footer { width: 100%; padding:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background:#d9d9d9; background-repeat: top-repeat-x;}

The css was originally:

.Footer { width: 100%; padding:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background:#d9d9d9;}

but that didn't work either. How do I make the footer go all the way from the left to the right side of the browser?

Thank you.

Solution

Looking at your webpage with chrome inspector, this error seems to be related with floating all the columns and header.

When you float an element, that element gets 'out' of the document flow. What this means is that this element actual size wont' be taken into consideration when it's time to layout things.

I usually don't want to have this behaviour on floated elements, so one way to avoid this is to set overflow: auto in the parent container.

Also, your header layout looks really strange. I'll update this when I have a definitive solution.

First update: I have added said overflow: auto to every parent with floated elements and now it works for me. Please add that rule to the following elements:

.Header
.Logo
.body

Please note that with these changes your page will look messy (specifically, there'll be many scrollbars around).

This is because you have been a little too much strict setting things' size. I would let things flow more naturally instead. For example:

Settings logo size shouldn't be neccessary.
Bullet points on Header have too few height. I would remove it too.

Another thing I would do is to split the background image in 3 (or 2 at least, header and content). That way, things are a little more decoupled and easier to change. Try to think of each 'logical' block (header, footer, sidebars, login form) as an independent module that shouldn't share things with the rest (images, classes, etc).

I'm sorry that all this can't be explained in a comment, but please don't hesitate to ask me anything.