/* page is the overall container which contains everything within the body EXCEPT the footer element - so the body tag has two childer,

and

is 100% width and it directly contains

which is 960px wide and centered within

*/ #page { /* following rules on min-height, height (twice) and margin required for sticky footer */ min-height: 100%; height: auto !important; height: 100%; width: 100%; min-width: 1100px; text-align: center; /*margin: 0 auto -467px;*/ /* the bottom margin is the negative value of the footer's height i.e. (height + padding) of footer */ } #main { width:1100px; padding: 40px 0; /* setting this margin is what allows us to centre this div i.e.

which is a direct child of */ margin: 0px auto; } /* mainleft is a third layer of 'main'/'outer' container, which just sits inside #main and fills it 100% width but aligns text left instead of centre */ #mainleft { width:100%; text-align:left; background: #fff; padding: 20px; box-sizing: border-box; } /* following 2 classes (.footer and .push) required for sticky footer */ .footer { color:inherit; /* background-color:#323026;*/ } .push { /* the .push div is a very neat construct to balance the footer to ensure the footer is always flush to the bottom regardless of whether the actaul content pushes the viewport down far enough to get a vertical scrollbar or not i.e. fills the viewport or not */ /*height: 467px;*/ /* .push must be the same height as .footer i.e. (height + padding) of footer */ } /* following are all related to items in the footer */ /* start of inner-footer stuff */ .footerimage { display: none; } div#FooterStats > table:first-child tr:first-child td { border-top: 0; padding: 0 0 20px; } div#FooterStats div.footercopyrightetc { margin-top: 20px; } /* end of footer stuff */ @media (max-width: 1160px) { #page { width: 100%; min-width: auto; } #main, .statscontainer, .headerbar{ width:100%; padding-left:30px; padding-right:30px; box-sizing: border-box; } } @media (max-width: 767px) { #main { padding: 30px 0; } #main, .statscontainer, .headerbar{ padding-left: 20px; padding-right: 20px; } }