margin: auto plus margin-left: offset? (css)

Question

I have #container {margin: 0 auto;} on my test site Than I added the left vertical menu and on some small screens that menu is not fully visible. Like my old laptop :-)

I want to keep the margin: auto setting in place but I want to move the whole #container little bit right. Could it be done some how? #container {margin-left:10px;} doesn't work ...

Answer 1

The simplest approach would be to introduce another element (or style another element if it's already available). Thus, you might have:

<div style="margin-left: 10px;">
   <div id="container" style="margin: auto;">...</div>
</div>

That way the centering is being done within a container div that's already got the appropriate left-hand padding.

Answer 2

Playing with firebug, it's good to use:

#container {
 margin: 0 auto;
 position:relative;
 left:10px;
}

Hope it solves...

Answer 3

If you wrap your #container div in another div with double the left margin, that will work.

  #wrap {
    margin-left: 20px;
  }
  .centre { /* this would be your #container */
    width: 100px;
    height: 40px;
    margin: auto;
    background-color: #f00;
  }
  #wrap .centre {
    background-color: #00f;
  }

The HTML:

  <div class="centre"></div>
  <div id="wrap">
    <div class="centre"></div>
  </div>

http://jsbin.com/emogu3