Divs running into the bottom of other each other

Question

I am using jQuery Masonry and the div's are flowing into to one another. Any help?

CSS:

div.cards div.card{
    width: 310px;
    margin: 11px;
    float: left;
    background: white;
    -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2x;
}

div.cards div.card img{
    max-width: 310px;
    min-width: 310px;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

div.cards div.card div.data{
    padding: 10px;
    width: 290px;
}

div.cards div.card div.data div.title{
    font-size: 17px;
    color: #2f3132;
    font-weight: 700;
}

div.cards div.card div.data div.information{
    font-size: 13px;
    color:#a0a7ab;
    overflow: auto;
    padding-top: 5px;
}

div.cards div.card div.data div.information span.username{
    float: left;
    overflow: auto;
}

div.cards div.card div.data div.information span.date{
    float: right;
    overflow: auto;
}

HTML / PHP:

<div class="card">
    <img src="<?=$url; ?>" />
        <div class="data">
            <div class="title">
                <a href="http://reddit.com<?=$reddit_post_premalink; ?>" target="_blank"><?php if($reddit_post_over18 == 1){ ?><span class="nsfw">[NSFW] </span><?php } ?><?=$reddit_post_title; ?></a>
            </div>
            <div class="information">
                <span class="username"><?=$reddit_post_author; ?></span>
                <span class="date"><?=post_date($reddit_post_created); ?></span>
            </div>
        </div>
    </div>

What's happening: enter image description here

Fixed this issue as per **http://stackoverflow.com/questions/16391198/jquery-masonry-images-are-overlapping-until-a-page-resize-is-done** — Harry, May 10 '13 at 10:11

Samuel Liew · Answer 1 · 2013-05-10T10:16:10.777

1

Possible problem:

Masonry runs before all the images have been loaded, resulting in miscalculated height for each card.

Solution:

Fix the height of each .card div using CSS.
Use imagesLoaded() plugin to run masonry only after all images in the parent container has loaded.

edited May 10 '13 at 10:16

answered May 10 '13 at 10:10

Samuel Liew

68,352
105
140
225

MarmiK · Answer 2 · 2013-05-10T11:01:59.563

Just have to change the parent,

div.cards div.card{

width: 310px;
margin: 11px;
float: left;
top:0;
bottom:10px;
min-height:310px;
background: white;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2x;
}

also you need to correct in ..

div.cards div.card img{
max-width: 310px;
min-width: 310px;
min-height: 310px; // there was no height...

i think this will do, if not please create a fiddle, and post it..

Divs running into the bottom of other each other

2 Answers2