Equalize height of two div with same parent in CSS - html

Question

I am trying to equalize the height from two div's, #innerwrapper .sidebar and #innerwrapper > .content, residing next to each other (by float: left) from the same parent, #innerwrapper.
I have solved this problem by using jQuery in a seperate file, but since it is a CSS issue, I would prefer solving it by using CSS. I tried several things written on StackOverflow, like using display: inline-block instead of float, or display: inline-table, but it wouldn't fix the problem.
The link to the Codepen is given below.
Do you know a solution in CSS?
Link to Codepen
HTML:
<div id="innerwrapper">
<div class="sidebar">
<div class="menu">
<ul>
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li>
</ul>
</div>
<div class="content">
<!-- content !-->
</div>
</div>
<div class="content">
<!-- content !-->
</div>
</div>
CSS:
#innerwrapper {
width: 66.66%;
margin: auto;
}
#innerwrapper .sidebar {
width: 15%;
background-color: #DFE2DB;
float: left;
}
.sidebar .menu li {
display: block;
}
#innerwrapper > .content {
width: 80%;
float: left;
}
jQuery:
function equalColHeight()
{
var $col1 = $('#innerwrapper .sidebar');
var $col2 = $('#innerwrapper > .content');
if ($col1.height() < $col2.height()) {
$col1.height($col2.height());
}
}
$(document).ready(function() {
equalColHeight();
});

Answer 1

No need for Javascript, you're right, it's a simple css trick.
Wrap both the content and the navigation into a div, to which you will give the color of the sidebar (in this example, grey). Set the content div to white and with a display:inline-block.
HTML
<div id="innerwrapper">
<div class="sidebar">
</div>
<div class="content">
</div>
</div>
CSS
#innerwrapper {
width: 66.66%;
margin: auto;
background-color:#DFE2DB;
}
#innerwrapper .sidebar {
width: 15%;
background-color: #DFE2DB;
float: left;
}
#innerwrapper > .content {
width: 85%;
display: inline-block;
background: #fff;
}
Plunker Here

Answer 2

As Mr.Alien commented you can using table-cell; or flex.
I have deleted all your jQuery and placed in the CSS needed to make this possible using display: table-cell;.
Changes in CSS
#innerwrapper {
width: 66.66%;
margin: auto;
display: table; /* Floats gone and added display table to parent */
}
#innerwrapper .sidebar {
width: 15%;
background-color: #DFE2DB;
display: table-cell; /* Floats gone and added display table-cell */
}
#innerwrapper > .content {
width: 85%;
display: table-cell;/* Floats gone and added display table-cell */
}
Demo using changes
*,
*:after,
*:before {
margin: 0;
padding: 0;
}
html {} body {
background-color: #191919;
}
header {} #title {
font-family: serif;
font-size: 1.1em;
margin: auto;
width: 66.66%;
color: #DFE2DB;
height: 6em;
}
#navwrapper {
background-color: #FFF056;
}
#navwrapper .menu {
font-size: 1.1em;
font-family: sans-serif;
margin: auto;
width: 66.66%;
}
#navwrapper li {
background-color: #E6D84D;
padding: 0.1em 0.5em;
display: inline-block;
}
#mainwrapper {
background-color: #FFFFFF;
}
#mainwrapper:after {
content: "";
display: table;
clear: both;
}
#innerwrapper {
width: 66.66%;
margin: auto;
display: table;
}
#innerwrapper .sidebar {
width: 15%;
background-color: #DFE2DB;
display: table-cell;
}
.sidebar .menu li {
display: block;
}
#innerwrapper > .content {
width: 85%;
display: table-cell;
}
<header>
<div id="title">
<h1>Something</h1>
</div>
</header>
<div id="navwrapper">
<div class="menu">
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
<li>Test 5</li>
</ul>
</div>
</div>
<div id="mainwrapper">
<div id="innerwrapper">
<div class="sidebar">
<div class="menu">
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
<li>Test 5</li>
</ul>
</div>
<div class="content">
Phasellus quis libero eros. Maecenas at mauris ornare, vestibulum nulla sit amet, blandit mauris. Pellentesque ut luctus magna, vitae aliquam diam. Nam egestas urna quam, ac tincidunt lorem ornare non. Morbi non leo at enim lacinia tincidunt.
</div>
</div>
<div class="content">
<p>
Integer quis auctor nibh, in pellentesque mi. In et rutrum mauris. Suspendisse rutrum bibendum arcu, non molestie orci iaculis id. Praesent ornare eros at nibh bibendum congue. Aliquam erat volutpat. Etiam sit amet ipsum eget lectus lobortis viverra ac
sed dolor. Nunc tortor dolor, semper ac lobortis quis, ornare iaculis mauris. Donec convallis quis risus nec suscipit. Aenean vitae tempus sem. Nunc id sollicitudin leo, eu malesuada leo. Cras scelerisque, libero non tristique sollicitudin, metus
lectus eleifend tellus, ac semper odio magna lacinia ex. Vestibulum ante libero, porttitor a turpis eget, mattis blandit ipsum. Nulla et ipsum vel mi aliquet porttitor non in enim. Sed nec nibh bibendum, facilisis lorem vel, tempus nisi. Sed cursus
purus ac elit pulvinar, in fringilla quam eleifend. Fusce non commodo velit, eu tempus nisi. Phasellus lacus lorem, consectetur at metus ut, auctor pretium dui. Vestibulum elit diam, blandit ut neque vitae, tempor mollis ipsum. Vestibulum nec
justo a augue mattis consectetur. In hac habitasse platea dictumst. Cras pharetra nisl eu nulla tempor convallis. Maecenas volutpat consequat luctus. Cras consequat, ligula in ullamcorper egestas, diam sapien aliquam quam, sed iaculis orci odio
id dolor. Integer in dui vestibulum, dictum turpis mollis, rhoncus nisi. In hac habitasse platea dictumst. Praesent id velit euismod, molestie mi eu, volutpat metus. Quisque rhoncus ante id lectus accumsan, scelerisque consectetur velit efficitur.
Maecenas aliquet fringilla feugiat. Aenean feugiat nulla ac tortor elementum, vel ultrices urna malesuada. Mauris et metus id velit semper dapibus sit amet nec mauris. Nulla lectus orci, semper vitae tortor nec, semper efficitur metus. Quisque
accumsan, enim vel sollicitudin feugiat, augue velit tincidunt lorem, ac elementum metus leo id tortor. Sed interdum diam mi, nec cursus ante malesuada vel. Sed eu eros eget nisl congue bibendum ut vitae mi. Fusce a mi vel enim dignissim tempor.
Mauris rutrum, arcu sit amet bibendum suscipit, metus tortor imperdiet lectus, non cursus felis risus sit amet tortor. Nullam eu ex a sapien faucibus vulputate vitae eu eros. Proin in enim blandit erat malesuada tincidunt at eu libero. Maecenas
lacinia leo nibh, at pharetra quam iaculis ac. Nunc rutrum purus massa, sit amet rutrum nulla rhoncus sagittis. Duis varius felis eu nisi mattis venenatis. Etiam sit amet suscipit quam, sit amet ultrices dui. Etiam dapibus mollis orci, sed ultricies
elit ornare et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum orci elit, vehicula et maximus non, posuere eu diam. Aenean quis cursus ipsum, sed mollis quam. Phasellus malesuada lacus
at lacus lacinia imperdiet. Praesent hendrerit lacus at enim consequat, vel ultricies tellus laoreet. Etiam consectetur fringilla ipsum vel blandit. Morbi vehicula ante vel aliquet tincidunt. Vivamus dapibus blandit sodales. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam et eros ac nunc maximus pulvinar et id enim. Proin dignissim metus vitae placerat vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan
hendrerit magna, eu porta dolor lacinia non. Ut ultrices aliquam arcu, non dictum turpis maximus a. Proin lacinia viverra nisi, ac interdum sapien. Aliquam facilisis et erat ac efficitur. Nulla sem diam, vulputate eget elit ut, porta viverra quam.
Sed tincidunt augue eu odio volutpat, nec volutpat turpis scelerisque. Mauris at ex nunc.
</p>
</div>
</div>
</div>