How to Have "Margin:Auto" and "Margin-Left:Offset" Working Together

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

Playing with firebug, it's good to use:

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

Hope it solves...

How to do margin: 0 auto 0 auto minus a few pixels with CSS?

Center using margin: 0 auto;

and move left using position: relative; left: -100px;

position: relative;
margin: 0 auto;
left: -100px;

margin:auto doesn't seem to work, can't figure it out

remove your "position:absolute;" from countdown. Margins cannot be calculated on absolutely positioned elements.

margin-right and left, margin, display:block/inline-block auto not working on div

I don't know what you are allowed to change and what not but this may work:

<html>
  <head>
    <script>
      function changeWidth(newWidth) {
        document.getElementById("test").style.width = newWidth;
      }
    </script>
    <style media="all">
      .custom-container {
        max-width: 100%;  /* made it 100% */
        margin-left: auto;
        margin-right: auto;
        display: inline-block;
      }
      .container {
        float: left;
        clear: none;
        width: 100%;
        box-sizing: border-box;
      }
      .sub-value {
        border: 1px solid red;
        max-width: 1280px;   /* restricted */
        margin: 0 auto;     /* centering */
      }
    </style>
  </head>
  <body>
    <div class="container custom-container">
      <div class="sub-value">
        <p
          >is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
          been the industry's standard dummy text ever since the 1500s, when an unknown
          printer took a galley of type and scrambled it to make a type specimen book. It
          has survived not only five centuries, but also the leap into electronic
          typesetting, remaining essentially unchanged. It was popularised in the 1960s
          with the release of Letraset sheets containing Lorem Ipsum passages, and more
          recently with desktop publishing software like Aldus PageMaker including
          versions of Lorem Ipsum.</p
        >
        <p
          >is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
          been the industry's standard dummy text ever since the 1500s, when an unknown
          printer took a galley of type and scrambled it to make a type specimen book. It
          has survived not only five centuries, but also the leap into electronic
          typesetting, remaining essentially unchanged. It was popularised in the 1960s
          with the release of Letraset sheets containing Lorem Ipsum passages, and more
          recently with desktop publishing software like Aldus PageMaker including
          versions of Lorem Ipsum.</p
        >
      </div>
    </div>
  </body>
</html>

How do I make a container offset to the left at a particular point and fill the remaining space in CSS?

Instead of absolute positioning as suggested in the other answers, I would go with calc() here, which allows you to do some basic math in CSS. (Absolute positioning is not a tool for basic layouting, and can lead to a lot of other issues with the rest of the document flow.)

The trick is to simply divide the available window width (100%) in half, subtract half of the max-width of container a - and then set that as margin-left for container b.

I went with a smaller max-width of 500px here, so that the effect is easily visible here in the rendered snippet, but you can easily modify this accordingly, for the max-width you actually need.

div {
  background: #ccc;
}

.container-a {
  max-width: 500px;
  margin: 1em auto;
}

.container-b {
  margin: 1em auto;
  margin-left: calc(100% / 2 - 250px) /* 250px = half the max-width of container a */
}

<div class="container-a">
  I am container-a
</div>
<div class="container-b">
  I am container-b
</div>

Auto-margin container with image :before and :after as container left/right border?

Okay, since the question was edited so that my previous answer didn't fit anymore, I came up with a new solution:
http://jsfiddle.net/fusuhga6/3/

Again, pretty straightforward:

Everything is in the DIV that holds the Youtube-video, which has

`position:relative` 
`margin: 0 auto`

in order to center it horizontally.

The two images are background-images in two absolute-positioned DIVs that are in the #youtube DIV, but positioned like this:

#leftPic, #rightPic {  
  position: absolute;
  width: 90px;
  height: 200px;
  }
 #leftPic {
   left: -90px;
  background: url(http://placehold.it/90x200) no-repeat top right;
 }
  #rightPic {
    right: -90px;
  background: url(http://placehold.it/90x200) no-repeat top left;
 }

So their left/right offsets correspond to their (fixed) width. Since they are attached to the #youtube DIV, that whole group will be centered.

Now, when the window becomes narrower than those three blocks together, the #youtube DIV remains centered, and the other two remain aligned to it as before, with their _outer_parts being cut off.

That should fulfill your criteria...

How to get margin left size using javascript when I use margin auto property in css

Use this:

1) With jQuery

var left = $(".test").offset().left;

2) Or, second version is that:
Replace your div to <div class="test" id="test"></div>, and use this js.

var left = document.getElementById("test").offsetLeft;

Why magin:auto is not enough to center position absolute or fixed?

You need to refer to the specification to understand this. If your element is not positionned using position:absolute then you need to consider this section where you can read:

If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

For in-flow elements, only margin is needed in addition to the width.

When it comes to position:absolute elements we refer to this section

If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0

It's clear that if you don't see any left, right or width, margin will get computed to 0 (no centring)

If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values

When you set left, right and width the margin will get equal values (that we can found with the formula) and you will have centring.

If you continue reading you can also see:

Otherwise, set 'auto' values for 'margin-left' and 'margin-right' to 0, and pick the one of the following six rules that applies.

So we only get a centring effect for margin if we set left, right and width. omiting one will not center the element.

Below an example to illustrate the 8 different cases like detailed in the specification.

.box {  height:50px;  border:1px solid;  position:relative;  margin:5px;}.box > div {  position:absolute;  left:0;  right:0;  margin:auto;  width:200px;  background:red;  color:#fff;}

<div class="box">  <div>some text</div></div><div class="box">  <div style="width:auto;">some text</div></div><div class="box">  <div style="left:auto">some text</div></div><div class="box">  <div style="left:auto;width:auto">some text</div></div><div class="box">  <div style="right:auto">some text</div></div><div class="box">  <div style="right:auto;width:auto;">some text</div></div><div class="box">  <div style="right:auto;left:auto;">some text</div></div><div class="box">  <div style="right:auto;left:auto;width:auto;">some text</div></div>

How to Have "Margin:Auto" and "Margin-Left:Offset" Working Together