How to make the right margin double the left margin

Question

I have an internal div with a fixed size inside an external div of variable width.

#outer { width: 100%; }
#inner { width: 80px; }

<div id="outer">
  <div id="inner"></div>
</div>

Run codeHide result

I want the inner div to be placed inside the outer div as follows:

[Npx of empty space][80px fixed-size inner div][2Npx of empty space]

where N is a certain number. As the window resizes, N will change, but on the right will remain twice the size on the left. Is it possible to use CSS?

Answer 1

As an alternative to Mr. Lister's positioning option, we can use calcthe margin.

#outer {
  width: 100%;
}
#inner {
  width: 80px;
  height: 35px;
  background: rebeccapurple;
  margin-top: 1em;
  margin-left: calc((100% - 80px) / 3);
  margin-right: calc((100% - 80px) / (3 * 2));
}

<div id="outer">
  <div id="inner">
  </div>
</div>

Run codeHide result

Answer 2

div auto, (100% - 80 )/2. div 1/3 , , (100% - 80 )/6.

#outer {
  width: 100%;
}
#inner {
  width: 80px;
  
  margin-left: auto; margin-right: auto;
  position: relative; left: calc(13.33px - 16.67%);
  
  /* to make it visible */
  background: cyan; height: 30px
}

<div id="outer">
  <div id="inner">
  </div>
</div>

Hide result

( , CSS .)

Answer 3

- , , . .

<div id="outer">
    <div id="inner-container">
        <div id="inner">
        </div>
    </div>
</div>

#outer {
    width: 100%;
}
#inner-container {
  width: 66%;
  margin: 0 auto 0 0;
}
#inner {
  width: 80px;
  margin: 0 auto;
}

, . , , .

CSS

Answer 4

, calc . (80 ) (= 80 /3) CSS.

#outer {
  background-color: powderblue;
}
#inner {
  width: 80px;
  height: 80px;
  background-color: palevioletred;
  position: relative;
  /*
   * push 33.3% of parent width towards right
   * pull 33.3% of own width towards left
   */
  left: 33.3%;
  margin-left: -26.6px;
}

<div id="outer">
  <div id="inner"></div>
</div>

Hide result