Question

I have a fixed width centered template and I wanted to apply 10px padding on left and right of “main” div. So that on small screens the site does not touch left side of the screen. It works in IE, Firefox, Safari, Opera but not in Google Chrome.

Here is the relevant code:

<style type="text/css">
  #main {
    padding:0 10px;
  }
  #wrap {
    width:980px;
    margin:0 auto;
  }
</style>
<div id="main">
  <div id="wrap">
  </div>
</div>

I tried various combinations of css but no success. You can take a look at actual page here. (may change in future!)

Thanks!

Answer 1

In this case it doesn’t work in any browser as the page actually scrolls sideways despite the appearance of the 10px gap. At least this is the behavior I get in Safari and Chrome.

Instead – what you want to use is max-width. This prevents the width from surpassing 980px but allows it to resort to width:auto up until that point.

#wrap {
    max-width: 980px;
    margin:0 auto;
}

max-width is compatible with all major browsers including IE7+

You should also checkout CSS media queries for handling smaller screen sizes:
http://css-tricks.com/css-media-queries/