侧边框一个在另一个下面

Question

简单却无法弄明白。我可以在顶部制作两个侧边框，另一个在下面。这是演示 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>

Answer 2

这实际上就像Bootstrap这样的框架，但是：

<div id="page">
    <div id="header">
        header
    </div>
    <div id="content-wrapper">    
        <div id="sidebar">
            <div class="sidebar-box">
                I am sidebar content
            </div>
            <div class="sidebar-box">
                I am also sidebar content
            </div>
        </div>
        <div id="content">
            Stuff<br/>text<br/>Just to fill some space
        </div>
        <div class="clearfix">
        </div>
    </div>
    <div id="footer">
        footer
    </div>
</div>

然后：

#header {
  background: red;
}
#content {
  background: blue;
  width: calc(100% - 104px);
}

#sidebar {
  width: 100px;
  float: right;
}
.sidebar-box {
  background: green;
}

#footer {
  background: yellow;
  margin-top: 4px;
}

#content-wrapper {
  margin-top: 4px;
}

#content:after {
    content:'';
    display:table;
    clear:both;
}

诀窍！

在这里小提琴：http://jsfiddle.net/7pcLks4m/