CODEWITHSUNDEEP
htmlcssmasonry
FrontDev
FrontDev

Reputation: 847

CSS columns not working when divs have equal height

I'm trying to make a columns similar to masonry without having to load another JS plugin.

My Html looks like this

<div class="masonry">
    <div class="item">
        <p class="item__par">texttexttexttext</p>     
        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
    <div class="item">
        <p class="item__par">texttexttexttext</p>    
        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
    <div class="item">
        <p class="item__par">texttexttexttext</p>    
        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
    <div class="item">
        <p class="item__par">texttexttexttext</p>    
        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
        <div class="item">
        <p class="item__par">texttexttexttext</p>    
        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
        <div class="item">
        <p class="item__par">texttexttexttext</p> <a href="" class="">texttexttexttexttexttext</a>

        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
        <div class="item">
        <p class="item__par">texttexttexttext</p>    
        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
</div>

CSS:

.masonry {
    -moz-column-count:3;
    -webkit-column-count:3;
    column-count: 3;
}
.item {
    width: 273px;
    border:1px solid black;
    background: lightgray;
    display:inline-block;
    vertical-align:top;
    margin-right:50px;
    margin-bottom:50px;
}

Don't know the reason, but columns-count don't work as it seems to be. Last element of 2nd line is pulling down instead of floating to the right side of second line.

Update: This occurs when blocks have equal height. When I change content, columns start to work as horizontally

Please see the fiddle for more clarity and share your experience about this.Thanks

http://jsfiddle.net/frontDev111/7Lcrt8kq/

Upvotes: 1

Views: 89

Answers (2)

valeriu turcanu
valeriu turcanu

Reputation: 9

No, you code is working. It is just not responsive, if you make the jsfidle browser window bigger you will see clearly 3 colums.

Upvotes: 0

Tom Rees
Tom Rees

Reputation: 671

Those columns are stacking vertically, not horizontally. So it goes:

item1  item4  item7

item2  item5

item3  item6

You can achieve the desired behaviour by simply removing the column-count property: http://jsfiddle.net/zephod/n42sqd4v/1/

Edit: If you want full masonry behaviour, my advice is to use the jQuery Masonry plugin. Not only will it have covered a lot of edge-cases you will have missed, but it is also thoroughly tested in a broad set of web browsers and you'd need a very strong reason to reinvent that wheel.

Upvotes: 1

Related Questions