Question

With this markup:

<div class="wrapper">
    <article>A</article>
    <article>B</article>
    <article>C</article>
    <article>D</article>
    <article>E</article>
    <article>F</article>
</div>

How can I style it to have:

|-------|---------|
|       |         |
|   A   |    B    |
|       |         |
|-------|---------|
|       |         |
|   C   |    D    |
|       |         |
|-------|---------|
|       |         |
|   E   |    F    |
|       |         |
|-------|---------|

such that each pair should have an equal height? The height should come from the article that has the longer content, i.e. if the content in C is longer than D, then D should match the height of C.

What I have tried so far is the good old float, but since it’s floated then it has variable heights that depends on contents.

I have also googled similar things but what I have found are fixed-height columns that just hide extra contents.

Answer 1

Use equal height function for that that will worl

function equalHeight(group) {
    var tallest = 0;
    group.each(function() {
        var thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}


$(document).ready(function() {
    equalHeight($(".recent-article"));

});

// HTML

<div class="wrapper">
    <article class="recent-article">A</article>
    <article class="recent-article">B</article>
    <article class="recent-article">C</article>
    <article class="recent-article">D</article>
    <article class="recent-article">E</article>
    <article class="recent-article">F</article>
</div>