带边距的Div：0自动阻止另一个Div浮动到右边

Question

我正在尝试使用#primary和position: relative让div margin: 0 auto坐在页面中间，我还想要一个<aside>元素直接位于#primary的右侧，并且不会在宽度调整大小时移动。

使用margin: 0 auto时，我注意到在Chrome / Firefox开发人员工具中，这有效地提供了#primary两边的完整边距，防止任何内容进入该空间。

我尝试过#primary float: left，但这似乎取消了margin: 0 auto并使#primary在页面左侧刷新。

我怎样才能达到这个效果？感谢。

#content {
  margin: 0 auto;
  width: 100%;
}

#primary {
  position: relative;
  width: 900px;
  margin: 0 auto;
}

aside {
  width: 350px;
  float: right;
}

<div id="content">

  <div id="primary"></div>

  <aside></aside>

</div>

Answer 1

只需将<{1}} 放在上方/之前，将HTML中的DIV置于其中（我更改了元素的尺寸以使其适合代码段窗口）：

aside

#content{
    margin: 0 auto;
    width: 100%;
    height: 500px;
    background: yellow;
}

#primary{
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    background: red;
}

aside {
    width: 100px;
    height: 200px;
    float: right;
    background: green;
}