Love it Dan, I think from a visual point of view it does its job well. However, briefly looking at the code...even the first id looks very messy and contains redundant code and wondered your reasons behind them.
Code:
#page {
z-index: 1;
width: 940px;
min-height: 1120.675px;
margin-left: auto;
margin-right: auto;
padding: 42px 20px 20.325000000000045px;
You should/could use the following:
Code:
.page{
width: 940px;
margin: 42px auto;
padding: 0 20px;
}
OK, so why do I suggest the above?
First of all get rid of the ID (#) and change it to a class (.). This will immediately make the element reusable.
Secondly, you do not require z-index. Your not using any sort of positioning here (e.g. absolute positioning) so thats totally redundant and does not effect your layout in anyway. Get rid of it.
Min-Height...from what I could see this was doing absolutely nothing, Whats the reason for setting a set minimum height on what is in effect a page wrapper?
Lastly is your margin and padding's. To center the block all you need to add is margin: 0 auto;
You then use padding 42px top. All I see this doing is giving a margin between the top of the page block. So why not add that as a margin? Equalling margin: 42px auto; yes this will give margin top and bottom...but you have a big space at the bottom of the page ID anyway.
Then all thats left is your padding. Whats with the huge random long px value? Bring it down to just padding: 0 20px;
That should tidy that one up for you. You need to fire through your markup and css and see where you can tidy it.