Floating divs with variable height

Question

I have a list of divs with a variable height that which needs to be float'ed next to each other. The problem is the comment 4 should be placed above comment 2. But of course it can't do that because the comment 3 is taking its place.

Is this somehow doable in css with out changing the markup too much? The comments are added dynamically so its not always 5 comments. I made a jsfiddle showing the problem http://jsfiddle.net/Kv2Qf/ - What I have currently is this:

<div id="CommentsContainer">
    <div class="Comment">
        <div class="CommentContent" style="height: 250px;">
            Comment 1
        </div>
    </div>

    <div class="Comment">
        <div class="CommentContent" style="height: 100px;">
            Comment 2
        </div>
    </div>

    <div class="Comment">
        <div class="CommentContent" style="height: 200px;">
            Comment 3
        </div>
    </div>

    <div class="Comment">
        <div class="CommentContent" style="height: 250px;">
            Comment 4
        </div>
    </div>
</div>

With the styling:

#CommentsContainer
{
    width: 783px;
    height: 500px;
    background-color: #f2f2f2;
}

.Comment
{
    width: 229px;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    border: 1px solid #aaaaaa;
    background-color: #fffec7;
}

Result: Result

Expected Result:

or check out isotope: http://isotope.metafizzy.co/ and check the differences from isotope and masonry: http://stackoverflow.com/questions/8856893/difference-between-isotope-and-masonry-jquery-plugins — caramba, Feb 20 '14 at 16:20
Looks like this might have some solutions for you, but not with CSS alone: http://stackoverflow.com/questions/5234749 — HJ05, Feb 20 '14 at 16:21
Masonry was just what I needed. Can I "close" my question somehow when there is no answer? — Dumpen, Feb 20 '14 at 16:36
@Dumpen as long as there is no answer you can delete your question — caramba, Feb 20 '14 at 20:41
Ok I think I will just leave it in case any one has the same issue. — Dumpen, Feb 21 '14 at 08:37

score 0 · Answer 1 · answered Mar 04 '14 at 23:53

You can try giving a negative margin-top to the fourth box:

<div class="Comment" style="margin-top:-90px;">
    <div class="CommentContent" style="height: 250px;">
        Comment 4
    </div>
</div>

Works in IE and Firefox, never tested in other browsers.

Floating divs with variable height

1 Answers1

Linked