A free-flowing grid system (must be IE 8 compatible) - html

Question

At the moment, I have a tabular-style grid system, using a combination of inline-block and width. I do need to clarify that the <div>s I'm using in the jsFiddle contain text, while in reality, they'll each contain a table with a varying number of rows.
The sections are of unequal heights with the height value being calculated by the content. I'm not using Bootstrap, and I don't intend to.
Here is a jsFiddle of what I currently have, along with a diagram here.
And here is what I'm trying to achieve with this code. I should note that I've already tried changing it to display:block in combination with float:left and I couldn't achieve my goal.
The idea is that I'm trying to eliminate the unnecessary whitespace where a section on one side may be three times taller than the opposite side.
Can anyone enlighten me as to how I could approach this?

Answer 1

Here is a solution, by wrapping your sections with an article(could be div), and give that article the display:table-cell instead of #content, plus some minor changes
* {
font-size: 16px;
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
background: #efefef;
color: #555;
font-family: "Segoe UI", Tahoma, Verdana, Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 1.25;
}
h2 {
padding: 1.5em 0 0 0;
}
#content {
background: navy;
margin: auto;
height: 200px;
padding: 2em;
width: 70%;
display: table;
margin: auto;
width: 100%;
table-layout: fixed
}
.cell {
display: table-cell;
vertical-align: top;
width: 44% padding: 0 2%;
}
section {
background-color: lightblue;
margin: 5%;
padding: 5%
}
<main id="content">
<article class="cell">
<section>
<h2>Section 1</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</section>
<section>
<h2>Section 2</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</section>
<section>
<h2>Section 3</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel enim sed urna maximus viverra at et turpis. Nulla ut tortor ac erat consequat consectetur.Ut consectetur id massa convallis gravida. Nulla eget urna pharetra, pretium enim et, facilisis
est. Praesent sit amet erat nec ligula rhoncus semper non sed purus.</div>
</section>
</article>
<article class="cell">
<section>
<h2>Section 4</h2>
<div>Morbi ac fringilla mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eu ex erat.</div>
</section>
<section>
<h2>Section 5</h2>
<div>Vestibulum eleifend est purus, sit amet cursus lorem rutrum vel. Etiam vel volutpat tellus. Maecenas vehicula convallis lobortis. Praesent quis lorem quis purus bibendum condimentum eu id arcu. In laoreet ut est nec fermentum.</div>
</section>
<section>
<h2>Section 6</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</section>
</article>
</main>
UPDATE
based on OP comments, here is a responsive solution to meet OP requirements:
* {
font-size: 16px;
margin: 0;
padding: 0;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
body {
background: #efefef;
color: #555;
font-family:"Segoe UI", Tahoma, Verdana, Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 1.25;
}
h2 {
padding: 1.5em 0 0 0;
}
#content {
background: navy;
margin: auto;
height: 200px;
padding: 2em;
width: 70%;
display: table;
margin: auto;
width: 100%;
table-layout:fixed
}
.cell {
display: table-cell;
vertical-align: top;
padding:0 2%;
}
section {
background-color:lightblue;
margin:5%;
padding:5%
}
#media (max-width:1920px) { /* this will go from 1920px to 1280px */
.cell {
width: 44%;
}
}
#media (max-width:1280px) { /* this will go from 1280px to 480px */
.cell {
width: 50%;
float:left;
}
}
#media (max-width:480px) { /* this will go from 480px to 0px */
.cell {
width:100%;
display:block
}
}
<main id="content">
<article class="cell">
<section>
<h2>Section 1</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</section>
<section>
<h2>Section 2</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</section>
<section>
<h2>Section 3</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel enim sed urna maximus viverra at et turpis. Nulla ut tortor ac erat consequat consectetur.Ut consectetur id massa convallis gravida. Nulla eget urna pharetra, pretium enim et, facilisis
est. Praesent sit amet erat nec ligula rhoncus semper non sed purus.</div>
</section>
</article>
<article class="cell">
<section>
<h2>Section 4</h2>
<div>Morbi ac fringilla mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eu ex erat.</div>
</section>
<section>
<h2>Section 5</h2>
<div>Vestibulum eleifend est purus, sit amet cursus lorem rutrum vel. Etiam vel volutpat tellus. Maecenas vehicula convallis lobortis. Praesent quis lorem quis purus bibendum condimentum eu id arcu. In laoreet ut est nec fermentum.</div>
</section>
<section>
<h2>Section 6</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</section>
</article>
<article class="cell">
<section>
<h2>Section 7</h2>
<div>Morbi ac fringilla mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eu ex erat.</div>
</section>
<section>
<h2>Section 8</h2>
<div>Vestibulum eleifend est purus, sit amet cursus lorem rutrum vel. Etiam vel volutpat tellus. Maecenas vehicula convallis lobortis. Praesent quis lorem quis purus bibendum condimentum eu id arcu. In laoreet ut est nec fermentum.</div>
</section>
<section>
<h2>Section 9</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</section>
</article>
</main>