2

I have a catalog of products. All elements are floated left. However different elements can be of different height, because of the picture inside can be of different size. When middle element is longer than others in the same row, than second line elements get stuck to it.

Fiddle

HTML:

<div class="frame">
    <div class="element">
        <div></div>
    </div>
    <div class="element">
        <div class="img"></div>
    </div>
    <div class="element">
        <div></div>
    </div>
    <div class="element">
        <div></div>
    </div>
    <div class="element">
        <div></div>
    </div>
</div>

CSS:

.element{
    float: left;
    border: 1px solid black;
    margin: 0px 0px 10px 10px;
    min-height: 110px;
    min-width: 70px;
    box-sizing: border-box;
}
.frame{
    width: 240px;
    overflow: hidden;
    border: 1px solid black;
    padding: 10px 10px 0px 0px;
}
.img{
    height: 130px
}

Here you can see just a model of what I am talking about, it is not the real code, but it represents the problem. Is there any way I can adjust height of the same row element, so that there height will adjust the longest element in the row?

3 Answers 3

1

Have you applied Clear Property to the last element of your layout?? It is mendatory...

0
1

I think you need flexbox.

Check out my page here and how I position picture tiles.

1

This is not possible with CSS alone, you will need JavaScript to fix this. Masonry solves this problem: http://masonry.desandro.com.

Since you want to display images, you also might want to take a look at CollagePlus.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.