George George - 3 months ago 7
CSS Question

How to make the right margin twice the size of the left margin

I have a fixed-size inner div within a variable-width outer div.

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

#outer {
width: 100%;
}

#inner {
width: 80px;
}


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

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


where N is some number. As the window size changes, N will change, but the right will remain twice the size of the left. Is it possible to do with CSS?

Answer

As an alternative to Mr Lister's positioning option we can use calc on the margins.

#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>