CODEWITHSUNDEEP
csscss-float
bashleigh
bashleigh

Reputation: 9314

Float left, fluid layout

Is there a way of closing the gaps between elements without using column or rows?

I've build this

<div class="box">
    <p>Short height</p>
</div>
<div class="box">
    <ul>
        <li>Something</li>
        <li>To</li>
        <li>make</li>
        <li>height</li>
    </ul>
</div>
<div class="box">
    <p>Short height</p>
</div>
<div class="box">
    <p>Oh no! I'm not in the place where I should me! DX </p>
</div>

CSS

.box{
    width:30%;
    margin:0% 1.6666%;
    float:left;
}

How can I make the elements stop starting after the height of the previous longest element. Not even too sure how to word it!?

So instead of starting underneath the tallest, the 4th element should start underneath the element exactly above it. Is it even possible?

Upvotes: 0

Views: 233

Answers (3)

K K
K K

Reputation: 18099

Do you mean this layout:

http://desandro.github.io/masonry/demos/infinite-scroll.html

If yes, you can refer the plugin here: Masonry Plugin

You can also refer this plugin :Isotope

Upvotes: 0

josh
josh

Reputation: 56

you could try either having them in the same box to keep them together or try removing the margin

here is a fiddle with the margin removed

https://jsfiddle.net/49uzyskh/

css

.box{
    width:30%;
    /*margin:1.6666%;*/
    float:left;
}

Upvotes: 0

Md Sabbir Alam
Md Sabbir Alam

Reputation: 5054

The margin attribute in your css is doing the problem. Just remove the margin. Please let me know if it is the workable solution.

Upvotes: 1

Related Questions