What kind of script do I have to add so that the boxes align themselves automatically?

Question

<html>

<head>
 <title>nav page</title>
 <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
 <style>
  
  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;}

 </style>
</head>

<body>

 <nav>

  <div class="navbar">
   
   <div id="title">TAGS &emsp;<img src="{PortraitURL-30}"/>&emsp; PAGE</div>
   
   <div id="navlinks">
    <a href="/"><i class="fa fa-home"></i></a>
    <a href="https://www.tumblr.com/dashboard">dashboard</a>
    <a href="https://www.abi-s-themes.tumblr.com">&copy;</a>
   </div>
  
  </div>
  
  <div class="navunder"></div>
  
 </nav>

 <div id="containers">
  
  <div id="box">
   <div class="boxtitle">first box</div>
   
   <a href="#">first link</a>
   <a href="#">second link</a>
   <a href="#">third link</a>
   <a href="#">fourth link</a>
   <a href="#">fifth link</a>
  </div>
  
  <div id="box">
   <div class="boxtitle">second box</div>
   
   <a href="#">first link</a>
   <a href="#">second link</a>
  </div>
  
  <div id="box">
   <div class="boxtitle">third box</div>
   
   <a href="#">first link</a>
   <a href="#">second link</a>
   <a href="#">third link</a>
   <a href="#">fourth link</a>
   <a href="#">fifth link</a>
   <a href="#">sixth link</a>
   <a href="#">seventh link</a>
   <a href="#">eighth link</a>
   <a href="#">ninth link</a>
   <a href="#">tenth link</a>
  </div>
  
  <div id="box">
   <div class="boxtitle">fourth box</div>
   
   <a href="#">first link</a>
   <a href="#">second link</a>
   <a href="#">third link</a>
   <a href="#">fourth link</a>
   <a href="#">fifth link</a>
   <a href="#">sixth link</a>
  </div>
  
  <div id="box">
   <div class="boxtitle">fifth box</div>
   
   <a href="#">first link</a>
   <a href="#">second link</a>
   <a href="#">third link</a>
   <a href="#">fourth link</a>
   <a href="#">fifth link</a>
   <a href="#">sixth link</a>
   <a href="#">seventh link</a>
   <a href="#">eighth link</a>
   <a href="#">ninth link</a>
   <a href="#">tenth link</a>
  </div>
 </div>
</body>
</html>

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.

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.

Thanks guys!

One error: You have several divs with the same id. This won't work 'cause ids should be unique. Try using classes instead. You shouldn't need Javascript for that, use `display: flex` or e.g. `float: left` in your CSS. — some-non-descript-user, Dec 31 '15 at 15:39
@cale_b I think the downvotes are probably because of the actual question: `Can someone maybe give me a link where I can find some code like that or maybe shortly explain how I can write it myself,` which is really asking for off-site resources. I was considering downvoting for that reason but decided not to because the question shows research effort and can likely be edited (minor edits) to better fit SO's format. — disappointed in SO leadership, Dec 31 '15 at 17:03

score 2 · Accepted Answer · edited May 23 '17 at 12:15

You are asking for javascript, so I will present one (of several) ways this could be done in javascript.

As was mentioned in comments, this is also possible with straight css, using FlexBox. Check it out, but also be aware of browser compatibility.

With javascript (jQuery), you would want to look at the size of all the boxes, find the "max size" (the tallest one), and then set all of them to be the same height as the tallest one.

Also, since you are a student, I will offer some advice / coaching on a few things in your markup:

First, an id should be unique to the entire page. In your code, you have many elements with the id of box: <div id="box"> - these should likely be changed to have a class - even box: <div class="box">.

Now to the javascript:

// This is a shorthand for "document ready", and ensures you can use the `$` within the code contained inside the document ready
jQuery(function($) {
    // Set up our max height variable
    var maxHeight = 0;
    // Iterate over each box.  NOTE this assumes you've changed to class="box"
    $('.box').each(function() {
        // Use a small formula to determine if this element's height is larger, and if so, store that value in the variable
        maxHeight = Math.max($(this).height(), maxHeight);
    });
    // Now, assign that height to ALL of the boxes.
    $('.box').css('height', maxHeight);
});

Now, if you wanted to take this to the next level, you'd make this a function, and you'd call that function any time the page was resized just to be sure that they all stay the same height:

jQuery(function($) {
    function setHeights() {
        // Set up our max height variable
        var maxHeight = 0;
        // Iterate over each box.  NOTE this assumes you've changed to class="box"
        $('.box').each(function() {
            // Use a small formula to determine if this element's height is larger, and if so, store that value in the variable
            maxHeight = Math.max($(this).height(), maxHeight);
        });
        // Now, assign that height to ALL of the boxes.
        $('.box').css('height', maxHeight);
    }

    // watch the resize event, and call the setHeights function
    $(window).on('resize', function() {
        setHeights();
    });

    // Cause the heights to be adjusted on initial load
    setHeights();
});

Once you've got your head wrapped around THAT code, then you can check out even smoother / fancier ways to get the max height, such as this method: https://stackoverflow.com/a/6061029/870729

score 0 · Answer 2 · answered Dec 31 '15 at 16:32

If all you want to do is align them then you don't need any scripting. Using flex boxes(https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes), the float property or the position:relative property-value pair along with the top, right, bottom and left properties(if you need help with these properties or others, use this: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) does the job

What kind of script do I have to add so that the boxes align themselves automatically?

2 Answers2