Sidebar boxes one under another - html

Question

Simple yet can't figure it out. Hot can I make 2 sidebar boxes one at the top and one bellow. Here is demo
http://jsfiddle.net/logintomyk/fQPse/
<div id="sidebar">
Text<br/>Sidebar
</div>
<div id="sidebar">
Text<br/>Sidebar
</div>
Those two sidebar divs.

Answer 1

Wrap the sidebars with a parent element which you add the float:right CSS too
#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

This is practically what frameworks like Bootstrap were made for, but:
<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>
and then:
#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;
}
does the trick!
Fiddle here: http://jsfiddle.net/7pcLks4m/