Getting Divs to Stay Side By Side With Multiple Rows - html

Question

So I'm making a pinterest-style page where there are four divs per row and there can be an unlimited number of rows. The problem that I've ran into is that if the height of the divs are not all the same, the divs will go all over the place.
This is what I mean:
What Should happen:
What Actually happens:
My code (I need to keep it simple and can't do four larger divs for each column because of some php stuff that I've added):
<div id="newsList">
<div>
<img src="#">
<p>Text.</p>
</div>
<div>
<img src="#">
<p>Text.</p>
</div>
<div>
<img src="#">
<p>Text.</p>
</div>
<div>
<img src="#">
<p>Text.</p>
</div>
<div>
<img src="#">
<p>Text.</p>
</div>
<div>
<img src="#">
<p>Text.</p>
</div>
<div>
<img src="#">
<p>Text.</p>
</div>
<div>
<img src="#">
<p>Text.</p>
</div>
</div>
CSS:
#newsList {
width: 1330px;
margin: 0 auto 0 auto;
display: table;
height: auto;
overflow: auto;
}
#newsList > div {
width: 313px;
height: auto;
float: left;
cursor: pointer;
margin-left: 15px;
position: relative;
overflow: auto;
border-radius: 2px;
background-color: white;
margin-bottom: 16px;
display: inline-block;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
transition: all 0.3s ease-in-out;
}

Answer 1

Place the an outside container div that contains the divs with the content div that you would like to place inside them that way they can all be different lengths that way that the website pinterest does it.
.container {
width:150px;
float:left;
}
.Blue {
width:140px;
padding:2px;
margin:5px;
background-color:blue;
}
.Green {
width:140px;
padding:2px;
margin:5px;
background-color:green;
}
Here is a fiddle link: http://jsfiddle.net/ztdgz24n/1/