I have an annoying problem with my HTML page.
Here you can see my webpage: <http://jgeneration.altervista.org/layout3.html>

If you don't resize the window of your browser, you'll see it right, but if you do it then something strange happens. The first three divs of the second row get moved into a kind of new row when the second div of the first row gets bigger.

That's what happens:

[Screenshot 1](http://i.stack.imgur.com/eU854.png)

I want the divs to be like a waterfall like style, so they must adapt their position according to the height of the other ones.

Here's my HTML & CSS.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Muzic4U</title>
  <link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head>
<body>

<div style="max-width: 100%; background-color: #0099FF; text-align: center; color: #fff; padding: 20px; margin: 0;">
 <h1 style="margin: 0;"> Muzic4U </h1>
</div>

<div id="main">

  <div class="tab">
 <img src="http://cdn.albumoftheyear.org/album/25168-blast-radius.jpg" />
 <p class="caption"> <b> Insight </b><br> <i>The Blast Radius</i><br>2004</p>
 <div class="dw">
   <a href="">Download</a>
 </div>
  </div>

  <div class="tab">
 <img src="http://static.marapcana.com/wp-content/uploads/2015/05/Orgasmi-Meccanici-cover.jpg" />
 <p class="caption"> <b> Alien Army </b><br> <i>Orgasmi Meccanici</i><br>1999</p>
 <div class="dw">
   <a href="">Download</a>
 </div>
  </div>

  <div class="tab">
 <img src="http://img.maniadb.com/images/album/187/187420_1_f.jpg" />
 <p class="caption"> <b> Surreal & The Sound Providers </b><br> <i>True Indeed</i><br>2003</p>
 <div class="dw">
   <a href="">Download</a>
 </div> 
  </div>

  <div class="tab">
 <img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
 <p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
 <div class="dw">
   <a href="">Download</a>
 </div>
  </div>

  <div class="tab">
 <img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
 <p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
 <div class="dw">
   <a href="">Download</a>
 </div> 
  </div>

  <div class="tab">
 <img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
 <p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
 <div class="dw">
   <a href="">Download</a>
 </div>
  </div>

  <div class="tab">
 <img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
 <p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
 <div class="dw">
   <a href="">Download</a>
 </div>
  </div>

  <div class="tab">
 <img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
 <p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
 <div class="dw">
   <a href="">Download</a>
 </div>

  </div>

  <div class="tab">
 <img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
 <p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
 <div class="dw">
   <a href="">Download</a>
 </div>
  </div>

  <div class="tab">
 <img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
 <p class="caption"> <b> Ohmega Watts </b> <br> <i>The Find</i> <br> 2005 </p>
 <div class="dw">
   <a href="">Download</a>
 </div>
  </div>

  <span class="clear"></span>

</div>

<style>
 body {
  font-family: Ubuntu, sans-serif;
        padding: 0;
        margin: 0;
        background-color: #333;
 }

  /* unvisited link */
 a:link {
  color: #fff;
 }

 /* visited link */
 a:visited {
  color: #fff;
 }

 /* mouse over link */
 a:hover {
  color: #fff;
 }

 /* selected link */
 a:active {
  color: #fff;
 }

 img {
   display: table-cell;
   max-width: 100%;
 }

 #main {
   margin: 0 auto;
   padding: 5px 0 0 5px;
   max-width: 70%;
 }

 .tab {
   max-width: calc((100% / 5) - 5px);
   background-color: #666;
   text-align: center;
   float: left;
   display: inline-block; 
   margin: 0 5px 5px 0; 
   }

 .dw {
   max-width: 100%;
   background-color: #000;
   padding: 10px;
 }

 span.clear {
   clear: left;
   display: block;
 }

 .caption {
   font-size: smaller;
 }   

</style>

</body>
```

Thank you for the support.