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

Question

我试图让div #primary坐在页面中间与position: relative和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

只需将aside放在HTML代码中居中DIV之上/之前（我更改了元素的尺寸以使其适合代码段窗口）：

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

<div id="content">
    <aside>aside</aside>

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


</div>