CODEWITHSUNDEEP
htmlcss
Ben Daggers
Ben Daggers

Reputation: 992

How to distribute DIVS evenly (horizontal and vertical) that floats with each other?

So here's my current dilemma, what I'm trying to achieve here is something like this:

enter image description here

Just please ignore all the contents of each boxes/divs. notice that the 6 boxes floats with each other perfectly and evenly. That's what I'm trying to replicate.

So I have my own codes:

HTML

<div class="tentofifteen">
    <section class="grid-superloop-ten" id="wired-superloop">
    </section>
    
    <section class="grid-superloop-eleven" id="wired-superloop">
    </section>
    
    <section class="grid-superloop-twelve" id="wired-superloop">
    </section>

    <section class="grid-superloop-thirteen" id="wired-superloop">
    </section>

    <section class="grid-superloop-fourteen" id="wired-superloop">
    </section>
</div>

CSS

    <style>


.tentofifteen {
    height: auto;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}
#wired-superloop {
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
}
.tentofifteen:after {
    content:"";
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

.grid-superloop-ten {width:319px; min-height:700px;background:#CCC;}
.grid-superloop-eleven {width:220px; min-height:350px; background:#009;}
.grid-superloop-twelve {width:437px; min-height:350px; background:#F36;}
.grid-superloop-thirteen {width:337px; min-height:350px; background:#CC9;}
.grid-superloop-fourteen {width:319px; min-height:350px; background:#0F0;}
    
    
    
    
    
        </style>

Now, the result of this is not really successful. Which I have no idea how to figure out to float the last two divs.

here's the screen shot.

enter image description here

Any ideas what's wrong with the code? Could you please help to solve the issue?

Upvotes: 1

Views: 138

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122047

Try masonry https://jsfiddle.net/2Lzo9vfc/66/

JS

$('.tentofifteen').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 1
});

HTML

<div class="tentofifteen">
    <section class="grid-superloop-ten grid-item" id="wired-superloop">
    </section>

    <section class="grid-superloop-eleven grid-item" id="wired-superloop">
    </section>

    <section class="grid-superloop-twelve grid-item" id="wired-superloop">
    </section>

    <section class="grid-superloop-thirteen grid-item" id="wired-superloop">
    </section>

    <section class="grid-superloop-fourteen grid-item" id="wired-superloop">
    </section>
</div>

Upvotes: 1

Related Questions