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.
