How to fill in blank space using html and css

Question

I am building a social media site, http://www.skivecore.com/

and on larger screens like 3k and 4k, i am trying to make it to where posts will fill in missing space while using float:left;

i want the left column to fill in those gaps because when there are larger posts on the right side, the right column will leave a large gap and start a new row.

i can't show the raw code since the code is a couple hundred lines, but the output of html is:

<div class="post" id="570">
            <div id="report570" style="display:none;padding:10px;border-bottom:1px solid black;background-color:#F6F7F8;">
                Type: <select name="reporttype" id="reporttype570" class="formFields" style="padding:5px;border-radiuse:4px;border:1px solid #D0D0D0;">
                    <option value="0">Spam</option>
                    <option value="1">Harassment</option>
                    <option value="2">Sexual content</option>
                    <option value="3">Suicidal/Abuse</option>
                </select>
                <div class="compost-innerwrap" style="margin-top:10px;">
                    <textarea name="4" class="reportenter" id="reportbox570" placeholder="What do you think we need to know?"></textarea>
                </div>
                <div id="submit" onclick="sendreport(570)">
                    Report
                </div>
                <div style="clear:both;"></div>
            </div>
            <div onclick="disPostOpt()" id="postmenu5704" class="postmenu"><img src="/images/siteimage/more9.png" height="24"></div>
            <div id="postopt5704" class="postmenuoptions">
                <ul>
                     <li><div class="postOpt"><a href="javascript:(0);" onclick="reportPostModal(570)">Report post</a></div></li>
                     <li> <div class="postOpt"><a href="javascript:void(0)" onclick="deletepost(570)">Delete...</a></div></li>
                                                    <li><div class="postOpt"><a href="javascript:(0);" onclick="admindel(570)">Admin delete</a></div></li>
                                                </ul>
            </div>
            <div class="bodyclick"></div>
            <script>
                var postOpt = 1;
                $(document).ready(function()
                  {
                  $("#postmenu5704").click(function(){
                      if(postOpt == 1){  
                      $("#postopt5704").fadeIn(100);
                      $(".bodyclick").fadeIn(50);
                      postOpt = 2;
                      } else if(postOpt == 2) {
                      $("#postopt5704").fadeOut(100);
                      $(".bodyclick").fadeOut(50);
                      postOpt = 1;
                      }
                  });    
                  $(".bodyclick").click(function(){
                    $("#postopt5704").fadeOut(100);
                    $(".bodyclick").fadeOut(50);
                    postOpt = 1;
                  });
                    $(".postOpt").click(function(){
                    $("#postopt5704").fadeOut(100);
                    $(".bodyclick").fadeOut(50);
                    postOpt = 1;
                  });
                });
            </script>
            <div id="posttext">
                <div style="background: #FFFFFF url('Members/4/4.jpg') no-repeat; background-position: 50% 25%; background-size: cover;" class="imgpicstatus"></div>                    <div class="usernamebox"><a href="profile.php?id=4" class="username">Zachary Clinko</a></div>
                <p id="timestamp" style="display:inline;">March 20 at 12:24 AM - Near: </p><p style="display:inline;" id="timestamp">Florissant, Missouri</p>
                <div class="statustext">Got a 2k or 4k computer screen, just wait a couple more days and we'll have a fix for you very soon! <div id="youtubeholder"><div id="dummy"></div><iframe width="300" height="180" src="//www.youtube.com/embed/QWzW1TxonTM?controls=0&amp;rel=0&amp;showinfo=0" frameborder="0" allowfullscreen=""></iframe><div class="vidinfo"><a href="http://www.youtube.com/watch?v=QWzW1TxonTM" target="_blank" class="posttitle">The Ready Set - "Love Like Woe"</a><br><font class="postdescription">Comments are enabled now. <br>
<br>
Comment saying "BARAKITTY" if you're reading this.<br>
<br>
I used photoshop to make this video. It took me 7 hours. I know some lyrics are misspelled/wrong, I did it by ear. I kno</font></div></div> oh btw random song</div>
                                    <div class="sparkbar">
                    <div class="vote"></div>
                    <div class="sparkcount" id="sparkcount570"><span id="sparkspan570" style="color:#1AC32C;">+1</span></div>
                                                        <div class="updown">
                                <a id="like570" style="cursor:pointer;" onclick="like(570)">Remove up vote</a> · <a style="cursor:pointer;" id="dislike570" onclick="dlike(570)">Down</a>
                            </div>
                                                                        <a href="" style="padding: 5px 15px 5px 5px;display: block;float: right;">All</a><a href="" style="padding: 5px;display: block;float: right;">1 Replies</a>
                                        </div>
                <div class="dislikebar" id="dlikebar570" width="100%" style="background-color:red;min-height:4px;">
                    <div class="likebar" id="likebar570" style="float:left;min-height:4px;background-color:#167ac6;width: 100%;"></div>
                </div>
            </div>
            <div class="commentholder" style="overflow:hidden;">
                                            <div class="usercomment" id="comm248">
                            <div style="background: #FFFFFF url('Members/4/4.jpg') no-repeat; background-position: 50% 25%; background-size: cover;width:30px;height:30px;float:left;" class="imgpic"></div><div class="info"><a href="profile.php?id=4" class="username">Zachary Clinko</a> <div class="postOptComm"><a href="javascript:(0);" onclick="deletecomm(248);"><img title="Delete Comment" src="images/siteimage/prohibited.png" height="20"></a></div></div><div class="statustextcm"><div style="max-width: 565px;">testing</div></div>                               
                            <div class="timendata"><span class="timestamp">Posted:
                                Wednesday at 4:41 PM</span><span class="nolikethis"> · <div style="display: inline-block;" id="likecommcount570">No one likes this</div> · <a href="javascript:void(0)" id="likecomm248" onclick="likecomm(248)">Like</a></span>
                            </div>
                        </div>
                                            <div class="makecomment" id="comment570">
                        <div class="compost-innerwrap">
                        <textarea name="4" class="postenter" id="570" placeholder="What do you have to say?"></textarea>
                        </div>
                    </div>
                                </div>
        </div>

and then my css is:

.post {
    border: 1px solid #D0D0D0;


margin: 15px 5px 0 5px;
    border-radius: 4px;
    position: relative;
}
.post:hover {
    box-shadow: 0 0 2px #2C6080;
    border: 1px solid #499ED0;
}
.sparkbar {
    font-size: 12px;
    height: 32px;
    margin: 10px 0 0 0;
    padding: 0;
}
.sparkbar a {
    color:#499ED0;
}
.sparkbar a:hover {
    text-decoration:underline;
}
.sparkcount {
    border-radius: 2px;
    padding: 4px 6px 4px 6px;
    float:left;
    border: 1px solid #CCCCCC;
    margin: 0 5px 0 0;
    background: #F5F8FA;
}
.vote {
    float:left;
    padding: 5px;
}
.updown {
    float:left;
    padding: 5px;
}
.nolikethis {
    font-size: 12px;
    color: #4B9FD0;
}
.nolikethis a:hover {
    text-decoration:underline;
}

on a 4k screen it is:

@media (min-width: 3900px) {
    .post{
        width: 45% !important;
        float:left;
        margin:10px !important;
    }
}

more noticeable empty space

Answer 1

Try Packery, the bin packing layout library or in other words algorithms that help solving gaps. Here is the link: http://packery.metafizzy.co