Centering container for ipad

Question

am trying to find a way of centering my div #container on the ipad page. It's a fairly simple 960px wide, margin 0 auto job. The body is given a background color but on the ipad either the container just takes up the whole page or the margin works on the left but the page is stuck to the right hand edge.

I've seen various ideas posted over the internet about min-width, viewport etc. Ideally I'd use @media queries in my stylesheet as everything else looks fine by default

Thanks

Answer 1

In the box model, total width of an element is the sum of its margin, borders, padding and content width.

Total width of your container is 40 + 960 + 40 = 1040px, while iPad viewport width is 1024px. So you cannot center and you can see unexpected results!

Reduce width or padding of the container to make its total width less than 1024px, width:960px; padding:32px; eg.

Answer 2

Try changing the DIV's display attribute from the default block to inline-block.

div #container {
  display: inline-block;
}