Solution 1 - Floats
After centre aligning the content, you could use a simple float trick for the two middle divs:
CSS
html, body {
height: 100%;
width:100%;
margin: 0;
padding: 20px;
box-sizing:border-box;
}
#container {
text-align:center;
width:500px;
margin: 0 auto;
height:100%;
background:black;
padding:20px;
box-sizing:border-box;
}
#header {
background:green;
height:20%;
}
#wraper {
height:60%;
overflow:hidden;
}
#sidebar {
width:20%;
float:left;
height:100%;
background:red;
}
#content {
overflow:hidden;
background:blue;
height:100%;
}
#footer {
background:orange;
height:20%;
}
Solution 2 - Display:Table
After centre aligning the content, you could apply a table layout to the middle divs
CSS
html, body {
height: 100%;
width:100%;
margin: 0;
padding: 20px;
box-sizing:border-box;
}
#container {
text-align:center;
width:500px;
margin: 0 auto;
height:100%;
background:black;
padding:20px;
box-sizing:border-box;
}
#header {
background:green;
height:20%;
}
#wraper {
height:60%;
display:table;
width:100%;
}
#sidebar {
width:20%;
display:table-cell;
background:red;
}
#content {
display:table-cell;
background:blue;
}
#footer {
background:orange;
height:20%;
}