title: What kind of script do I have to add so that the boxes align themselves automatically?
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
   &lt;title&gt;nav page&lt;/title&gt;
   &lt;link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"&gt;
   &lt;style&gt;
    
    body{
     font-family:'Open Sans', Helvetica, sans-serif;
     color:#000;
     margin:0;
     background-color:#FFF;
     background-attachment:fixed;
    }
   
    a {
     text-decoration:none;
     color: #CDCDCD;
    }
   
    a:hover {
     text-decoration:none;
     color:#a0a0a0;
    }
    
    .navbar {
     position:fixed;
     background-color: #FFF;
     text-align:left;
     width: 100%;
     height: 50px;
     top:0;
     z-index:999;
    }
    
    /* this is the little separating grey line underneath the nav bar */
    .navunder {
      position:fixed;
      background-color: #888;
      width:100%;
      height:2px;
      top:50px;
      z-index:999; 
      -webkit-box-shadow: 0px 9px 4px -5px rgba(138,138,138,1);
      -moz-box-shadow: 0px 9px 4px -5px rgba(138,138,138,1);
      box-shadow: 0px 9px 4px -5px rgba(138,138,138,1);   
    }
    
    #title{
     float:left;
     margin-left:25px;
     margin-top:5px;
     text-transform:luppercase;
     text-align:center;
     font-size:14px;
     color: #CDCDCD;
     letter-spacing:2px;
     font-weight:bold;
     z-index:9999;
    }
    
    #title img {
     vertical-align:middle;
     height:40px;
     border:1px solid #B7B7B7;
     padding:0;
    }
  
    #navlinks {
     float:right;
     margin-right: 20px;
     margin-top:17px;
     fext-transform: uppercase;
     font-size:13px;
     font-family:
     color: #CDCDCD;
     text-align:right;
     z-index:999;
    }
    
    #navlinks a {
     padding:10px 10px 10px 0;
    }
    
    .logo {
     width:10px;
     height:10px;
     bottom:50px;
     left:800px;
     border: 1px solid #615c5c;
    }
    
    #containers {
     width:75%;
     text-align:center;  
     margin-top:120px;
     margin-bottom:100px;
     margin-left:auto;
     margin-right:auto;
    }
    
    #box{
     float:left;
     width:170px;
     height:auto;
     padding:10px;
     border: 0px solid #dbdbdb;
     padding:5px;
     background: #FFF;
     margin:15px;
     font-size:9px;
     text-align:left;
     -webkit-box-shadow: 0px 0px 48px 0px rgba(0,0,0,0.18);
     -moz-box-shadow: 0px 0px 48px 0px rgba(0,0,0,0.18);
     box-shadow: 0px 0px 48px 0px rgba(0,0,0,0.18);
    }
     
    .boxtitle{
     background:#fff;
     font-size:10px;
     padding:10px;
     margin:0px;
     margin-bottom:1px;
     text-align:left;
     text-indent:5px;
     text-transform:uppercase;
     font-weight:bold;
     letter-spacing:2px;
     border-bottom: 1px solid #dbdbdb;
    }
     
    #box a{
     width:157px;
     font-size:9px;
     color:#000;
     letter-spacing:1px;
     margin-bottom:10px;
     padding:10px;
     padding-left:3px;
     background:#fff;
     border-bottom:1px solid #eeeeee;
     margin-bottom:2px;
     -webkit-transition: all .5s;
     text-align:left;
     text-transform:lowercase;
     display: block;
    }
     
    #box a:hover{
     color:#65AC88;
     -webkit-transition: all .5s;
    }
    
    ::-webkit-scrollbar { width: 4px; height: 3px;}
    ::-webkit-scrollbar-button { width: 0px; height: 0px;}
    ::-webkit-scrollbar-thumb { background: #e1e1e1; border: 12px none #ffffff; border-radius: 38px;}
    ::-webkit-scrollbar-thumb:hover { background: #ffffff;}
    ::-webkit-scrollbar-thumb:active { background: #000000;}
    ::-webkit-scrollbar-track { background: #818181; border: 76px none #ffffff; border-radius: 100px;}
    ::-webkit-scrollbar-track:hover { background: #666666;}
    ::-webkit-scrollbar-track:active { background: #b5fde8;}
    ::-webkit-scrollbar-corner { background: transparent;}
  
   &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
   &lt;nav&gt;
  
    &lt;div class="navbar"&gt;
     
     &lt;div id="title"&gt;TAGS &amp;emsp;&lt;img src="{PortraitURL-30}"/&gt;&amp;emsp; PAGE&lt;/div&gt;
     
     &lt;div id="navlinks"&gt;
      &lt;a href="/"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;a href="https://www.tumblr.com/dashboard"&gt;dashboard&lt;/a&gt;
      &lt;a href="https://www.abi-s-themes.tumblr.com"&gt;&amp;copy;&lt;/a&gt;
     &lt;/div&gt;
    
    &lt;/div&gt;
    
    &lt;div class="navunder"&gt;&lt;/div&gt;
    
   &lt;/nav&gt;
  
   &lt;div id="containers"&gt;
    
    &lt;div id="box"&gt;
     &lt;div class="boxtitle"&gt;first box&lt;/div&gt;
     
     &lt;a href="#"&gt;first link&lt;/a&gt;
     &lt;a href="#"&gt;second link&lt;/a&gt;
     &lt;a href="#"&gt;third link&lt;/a&gt;
     &lt;a href="#"&gt;fourth link&lt;/a&gt;
     &lt;a href="#"&gt;fifth link&lt;/a&gt;
    &lt;/div&gt;
    
    &lt;div id="box"&gt;
     &lt;div class="boxtitle"&gt;second box&lt;/div&gt;
     
     &lt;a href="#"&gt;first link&lt;/a&gt;
     &lt;a href="#"&gt;second link&lt;/a&gt;
    &lt;/div&gt;
    
    &lt;div id="box"&gt;
     &lt;div class="boxtitle"&gt;third box&lt;/div&gt;
     
     &lt;a href="#"&gt;first link&lt;/a&gt;
     &lt;a href="#"&gt;second link&lt;/a&gt;
     &lt;a href="#"&gt;third link&lt;/a&gt;
     &lt;a href="#"&gt;fourth link&lt;/a&gt;
     &lt;a href="#"&gt;fifth link&lt;/a&gt;
     &lt;a href="#"&gt;sixth link&lt;/a&gt;
     &lt;a href="#"&gt;seventh link&lt;/a&gt;
     &lt;a href="#"&gt;eighth link&lt;/a&gt;
     &lt;a href="#"&gt;ninth link&lt;/a&gt;
     &lt;a href="#"&gt;tenth link&lt;/a&gt;
    &lt;/div&gt;
    
    &lt;div id="box"&gt;
     &lt;div class="boxtitle"&gt;fourth box&lt;/div&gt;
     
     &lt;a href="#"&gt;first link&lt;/a&gt;
     &lt;a href="#"&gt;second link&lt;/a&gt;
     &lt;a href="#"&gt;third link&lt;/a&gt;
     &lt;a href="#"&gt;fourth link&lt;/a&gt;
     &lt;a href="#"&gt;fifth link&lt;/a&gt;
     &lt;a href="#"&gt;sixth link&lt;/a&gt;
    &lt;/div&gt;
    
    &lt;div id="box"&gt;
     &lt;div class="boxtitle"&gt;fifth box&lt;/div&gt;
     
     &lt;a href="#"&gt;first link&lt;/a&gt;
     &lt;a href="#"&gt;second link&lt;/a&gt;
     &lt;a href="#"&gt;third link&lt;/a&gt;
     &lt;a href="#"&gt;fourth link&lt;/a&gt;
     &lt;a href="#"&gt;fifth link&lt;/a&gt;
     &lt;a href="#"&gt;sixth link&lt;/a&gt;
     &lt;a href="#"&gt;seventh link&lt;/a&gt;
     &lt;a href="#"&gt;eighth link&lt;/a&gt;
     &lt;a href="#"&gt;ninth link&lt;/a&gt;
     &lt;a href="#"&gt;tenth link&lt;/a&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've been learning HTML and CSS at school but I'm still very insecure with javascript and jQuery and what I want to do, but don't know which code to use is basically just an automatic rearrangement of the boxes. </p>
  
  <p>What I want is that no matter how many tags I add to the first box, the fifth box rearranges itself underneath the first box with a top-margin of 10px.</p>
  
  <p>Thanks guys!</p>