Smart phone ruins my centred layout

Hi guys,

Years ago I was told that the best way to create a fixed width centred layout was to position a wrapper by setting left to 50% and margin-left to negative-half of the width (ie -400px on an 800px width). I’ve been using this successfully for years, but having to design for smart phones now has highlighted an issue: The left margin is often off the left hand side of the viewport and I can’t scroll over to it. I don’t want a fluid width layout, I just want to be able to squeeze the whole thing on the screen, but how?

Bloody phones!

BTW, on a Nokia N900, the built-in Micro-B browser is a problem, but Opera does actually scale out kind of how I want it

There’s another common centering technique:

set the container to the width you want (say 800px)
give it margin: 0 auto (or margin: auto… it’s only for the sides though).

You could see if this technique works better, however many phones are going to have a problem with wide widths like 800px anyway. You said you do not want a fluid width but that will work better on more kinds of phones. Opera just seems to be very good at adapting to web sites who are solely built for desktop screens, but it’s a rather fantastic browser : )

Sorry, I was going to update this earlier. I found the margin: 0 auto; solution earlier today and it seems to have worked in FF and Micro-B. I’ve not yet tested it with other browsers but I’ve been told that I may need to make some adjustments for IE (no surprise there then).

Thanks for the reply