html - 边栏框一个下一个

Question

简单却想不通。我可以制作 2 个边栏框，一个在顶部，一个在下方。这是演示 http://jsfiddle.net/logintomyk/fQPse/

<div id="sidebar">
     Text<br/>Sidebar
</div>
<div id="sidebar">
     Text<br/>Sidebar
</div>

那两个侧边栏 div。

Answer 1

用父元素包裹侧边栏，您也添加了 float:right CSS

#wrapper {
  width: 90%;
}
#header {
  width: 100%;
  height: 50px;
  background-color: lightblue;
}
#content {
  /* *** I want something that will change width to fill blank space when the user re-sizes the browser and the sidebar moves *** */
  margin-top: 4px;
  background-color: yellow;
}
#content >p {
  margin-right: 100px;
  margin-top: 0px;
}
.sidebarGroup {
  width: 100px;
  float: right;
}
.sidebar {
  width: 100px;
  margin-top: 4px;
  background-color: pink;
}
#footer {
  width: 100%;
  height: 40px;
  margin-top: 4px;
  background-color: red;
}

<div id="Wrapper">
  <div id="header">
    header
  </div>
  <div class="sidebarGroup">
    <div class="sidebar">
      Text
      <br/>Sidebar
    </div>
    <div class="sidebar">
      Text
      <br/>Sidebar
    </div>
  </div>


  <div id="content">
    <p>
      Stuff
      <br/>text
      <br/>Just to fill some space
    </p>
  </div>

  <div id="footer">
    footer
  </div>
</div>