Try out my new webpage analyser
Centering Web Pages
Ever made an amazing CSS website firmly centred on the page, only to find out that it doesn’t work properly? No, of course you haven’t. Well unfortunately I have.
With most of the CSS centring techniques I’ve seen, when your visitors resize their browser, or are using 800 x 600 screens, the top of your website seems to cut–off, or slide underneath the browser controls at the top of the window, and the left–hand side of the screen also slides behind the browsers left most edge!
Not good! It isn’t very accessible, and it looks very unprofessional. It can lead to a website that looks like this:
Notice how the logo and the text on the right hand side of the screen are cut–off.
I’m sure you’ll agree that no–one wants this to happen to their website. So obviously a fix is required. Sadly I’ve seen some websites advocating using tables to stop this from happening! Thankfully I can’t remember which ones! That suggestion certainly doesn’t appeal to my (now) fairly well developed sense of the rightness of proper semantic markup and separation of presentation from content.
Well here is a technique using pure CSS that will let you centre your website and stop it sliding behind the top and left edges of the screen on smaller displays / browsers.
It’s not perfect as it adds slight bloat to the code in the form of some extra div tags, but it’s a lot better than any of the alternatives I’ve seen.
I don’t think this technique is unique, but I do hope it helps someone.
This is a fixed width, properly centred CSS layout that doesn’t disappear underneath the top and left edges of your screen.
It is cross browser tested, and is in ‘production use’ on two websites I’ve been involved with; www.fabsinglefriends.com and www.gemtrap.com so I can easily vouch for it.
I’ve made the simplest most basic version of this page I can, so that you don’t have to worry about stripping out reams of code to figure out how it works.
You’ll notice the empty HTML comment above the doctype declaration, this is needed to put IE into quirks mode.
Anyway have fun with this fixed width properly centered file.
