How to have "margin:auto" and "margin-left:offset" working together?

I have a container on my test site:

#container {
  margin: 0 auto;
}

Then 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开发者_如何学C in place but I want to move the whole #container a little bit to the right.

Could it be done some how?

I have tried #container {margin-left:10px;}, but to no avail.

Playing with firebug, it's good to use:

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

Hope it solves...

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.

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