Question

Hy there,

I’m experiencing some (understanding) problems with some HTML & CSS of mine.

I have multiple DIVs (.item) inside a parent DIV (.group). The height of those child DIVs depends on their content which is dynamic.

Working example with static content: http://jsfiddle.net/YfDWL/

HTML:

<div class="group">
    <div class="item">
        <div class="item-title">item 1</div>
        <div class="item-tag">tag1</div>
    </div>
    <div class="item">
        <div class="item-title">item 2</div>
        <div class="item-tag">tag1</div>
        <div class="item-tag">tag2</div>
        <div class="item-tag">tag3</div>
        <div class="item-tag">tag4</div>
    </div>
    <div class="item">
        <div class="item-title">item 3</div>
        <div class="item-tag">tag1</div>
        <div class="item-tag">tag2</div>
    </div>
</div>
<div class="group">
    <div class="item">
        <div class="item-title">item 1</div>
        <div class="item-tag">tag1</div>
        <div class="item-tag">tag2</div>
        <div class="item-tag">tag3</div>
        <div class="item-tag">tag4</div>
    </div>
    <div class="item">
        <div class="item-title">item 2</div>
        <div class="item-tag">tag1</div>
        <div class="item-tag">tag2</div>
    </div>
    <div class="item">
        <div class="item-title">item 3</div>
        <div class="item-tag">tag1</div>
    </div>
</div>

CSS:

.group {
    margin: 30px;
    padding: 10px;
    border: 1px dashed black;
}

.item {
    display: inline-block;
    border: 1px solid black;
    width: 100px;
    margin-right: 10px;
}

.item-title {
    text-align: center;
    font-style: italic;
    font-weight: bold;
}

What I would like to achieve is that all item DIVs inside a group should have the same height and should be aligned at the top. This brings me to a few problems:

1. The alignment
   How can i align all item DIVs at the top of the group? Right now they are aligned at the bottom as you can see at the example…

2. The height
   As I’ve seen in other questions it seems that this can’t be done with pure HTML/CSS. Therefore I’ve decided to use a little JS with JQuery to correct the height of the elements.
   Working example: http://jsfiddle.net/YfDWL/1/

JavaScript:

$(window).load(function() {
    "use strict";

    var maxHeight;

    // Iterate through every group
    $('.group').each(function(idx, group) {
        maxHeight = 0;

        // Iterate through every item of the group and save the max height
        $(group).find('.item').each(function(idx, item) {
            var height = $(item).height();

            if (!maxHeight || (height > maxHeight)) {
                maxHeight = height;
            }
        });

        // Set the max height to all items inside the group
        if (maxHeight) {
            $(group).find('.item').css('height', maxHeight);
        }
    });
});

As you can see, this is working ok, but the alignment still is a problem…

What I’d like to know now is where the alignment of the items comes from and how i could manage to put all items at the top of the group?

Additionally I’d love to here suggestions if the “same height”-problem could be solved more elegently and maybe without JS at all…

Thanks & best regards,
mik

Answer 1

Add vertical-align:top

.item {
    display: inline-block;
    border: 1px solid black;
    width: 100px;
    margin-right: 10px;
    vertical-align:top
}

DEMO

---

You can refer this example to know how to get equal height without using js .

DEMO 2

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks