I’m regularly called upon to build shops, or very simple CMS systems with image upload facilities. This is fine, no complaints about that, but when you’re creating a CMS with image uploads, you always need to handle what happens when your user doesn’t upload an image – or what happens if an image is deleted.

Now I know it’s trivial to create an if statement to conditionally show an image or not, but it would be even more trivial if we could just add another attribute to X/HTML <img> tags to allow specifying an alternative image if no image is available. I know we already have the alt tag, to show text or help users with screen readers, but how about something like altimg=”image.gif” as a new attribute?  Then you could just set it up once and everytime an image tag is loaded without a src=”" attribute, or the file specified by the src=”" attribute is missing you have a fallback image.

It would mean marginally less typing for me, potentially saving me from the devastating effects of RSI! It could also result in a slightly better end-user experience abolishing those nasty placeholders in IE (and firefox if you have that setting switched on.

Perhaps this has already been suggested elsewhere, I don’t know, and to be honest I haven’t really followed the HTML 5 development so far, so if this (or something similar) is already in there a) please let me know b) great.

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.comand 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.