Floating DIV's To Fill Unused Space

When working with a certain API, I am using a function that basically provides me with dozens of categories of settings. To display these, I opted to have a container DIV and split

Solution 1:

Check out http://masonry.desandro.com/

Im using it for a current project it is good. I am currently finding a few issues with Bootstrap and floating elements within a dropdown. Though nothing that will cause me to drop the plugin.

Solution 2:

Try this JS method:

<script>
function renderGrid() {
    var blocks = document.getElementById("container").children;
    var pad = 10,
        cols = 4, //Change this to as much as you want but in this It's 4
        newleft, newtop;
    for (var i = 1; i < blocks.length; i++) {
        if (i % cols == 0) {
            newtop = (blocks[i - cols].offsetTop + blocks[i - cols].offsetHeight) + pad;
            blocks[i].style.top = newtop + "px";
        } else {
            if (blocks[i - cols]) {
                newtop = (blocks[i - cols].offsetTop + blocks[i - cols].offsetHeight) + pad;
                blocks[i].style.top = newtop + "px";
            }
            newleft = (blocks[i - 1].offsetLeft + blocks[i - 1].offsetWidth) + pad;
            blocks[i].style.left = newleft + "px";
        }
    }
}
window.addEventListener("load", renderGrid, false);
window.addEventListener("resize", renderGrid, false);
</script>

And now the HTML part:

<div id="container">
   <div><p>Your content here!</p></div>
</div>

And that's about It but make sure you have an id="container" instead of a class="container" also add this CSS style Inside your CSS file:

#container > div {
position: absolute;
float: left;
width: 25%;
}

Result: automatic alignment of you divs with automatic top and left element styles.

Hope this works! -Arqetech