Two columns with varying item counts but equal overall height

Question

Two columns with varying item counts but equal overall height

Wondering how to create a grid in HTML and CSS with columns of varying heights?

I'm trying to find a way to make the shorter column stretch to match the height of the taller one. I attempted using JavaScript but wasn't satisfied with the results, especially since the tallest column may not have the most rows. Additionally, different content lengths can result in boxes with varied heights.

I'm open to different markup approaches - currently using two side-by-side lists, though I'm considering a table or another method. However, simply using rowspan doesn't seem like it will suffice as it would only create one box much larger than the rest. This issue seems common - any effective solutions out there?

javascript html css html-lists

Answer 1

Answer №1

In this scenario, Javascript is likely the best solution. Personally, I would recommend utilizing percent-height for the elements within the lists.

Start by calculating how many elements are in each list.
Divide 100 by that number (can be tricky with values like 3, 6, etc)
Assign a percentage height to each element
Remember to also set the height on parent elements for percentages to function correctly

Answer 2

In this scenario, Javascript is likely the best solution. Personally, I would recommend utilizing percent-height for the elements within the lists.

Start by calculating how many elements are in each list.
Divide 100 by that number (can be tricky with values like 3, 6, etc)
Assign a percentage height to each element
Remember to also set the height on parent elements for percentages to function correctly

Answer 3

Answer №2

Check out this jQuery solution: http://jsfiddle.net/hunter/sG39d/

Adding top and bottom margins as well as padding to the li elements can make things a bit more complex.

$(function() {
    var $tallest = null;
    var $ul = $("ul");

    $("ul").each(function() {
        if ($tallest == null || $(this).height() > $tallest.height()) {
            $tallest = $(this);
        }
    });
    var height = $tallest.height();
    $ul.not($tallest).each(function() {
        var update = height / $(this).find("li").length;
        $(this).find("li").css("height", update);
    });
});

Answer 4

Check out this jQuery solution: http://jsfiddle.net/hunter/sG39d/

Adding top and bottom margins as well as padding to the li elements can make things a bit more complex.

$(function() {
    var $tallest = null;
    var $ul = $("ul");

    $("ul").each(function() {
        if ($tallest == null || $(this).height() > $tallest.height()) {
            $tallest = $(this);
        }
    });
    var height = $tallest.height();
    $ul.not($tallest).each(function() {
        var update = height / $(this).find("li").length;
        $(this).find("li").css("height", update);
    });
});

Answer 5

Answer №3

After analyzing your code snippet:

let columnHeights=[], count=0, columns=[];

$('ul').each(function () {
    columns.push(this);
    let height = 0;
    $(this).find('li').each(function() {
        height += $(this).innerHeight();
    });
    columnHeights.push(height);
    count++;
});

let maxHeight = Math.max.apply(null, columnHeights);

for(let j=0; j<columns.length; j++) {
    let difference = Math.floor((maxHeight - columnHeights[j]) / $(columns[j]).find('li').length);
    $(columns[j]).find('li').each(function() {
        $(this).css('height', $(this).innerHeight() + difference);
    });
}

Answer 6

After analyzing your code snippet:

let columnHeights=[], count=0, columns=[];

$('ul').each(function () {
    columns.push(this);
    let height = 0;
    $(this).find('li').each(function() {
        height += $(this).innerHeight();
    });
    columnHeights.push(height);
    count++;
});

let maxHeight = Math.max.apply(null, columnHeights);

for(let j=0; j<columns.length; j++) {
    let difference = Math.floor((maxHeight - columnHeights[j]) / $(columns[j]).find('li').length);
    $(columns[j]).find('li').each(function() {
        $(this).css('height', $(this).innerHeight() + difference);
    });
}

Answer 7

Answer №4

After spending some time on it, I have finally put together the Fiddle and the JS-Code:

My approach considers the relative size of the elements and stretches them proportionally. For instance, a div that originally occupied 50% of the space will still maintain that percentage after being stretched in the ul.

(There may be challenges when dealing with padding and borders. If anyone has a solution for this, I would love to hear it!)

JS:

$(function() {
    var $allUl = $('ul');
    setNewPercentages($allUl);

    function getTallestUl($uls) {
        var max = 0;
        var $ulTallest;

        $uls.each(function(i,e) {
            console.log( $(this).height() > max);
            if( $(this).height() > max) {
                $ulTallest = $(this);
                max = $(this).height();
            }
        });

        return $ulTallest;
    };

    function adjustPercentages($ul) {
        $ul.find('li').each( function(i,e) {
            var $this = $(this)
            ,   ulHeight = $ul.height()
            ,   liHeight = $this.height()
            ,   percentage = (liHeight / ulHeight * 100);

            $this.css('height', percentage + '%');
        });
    };

    function setNewPercentages($uls) {
        var $tallest = getTallestUl($allUl).addClass('tallest');
        var heightTallest = $tallest.height();

        $uls.not('.tallest').each(function(i,e) {
            adjustPercentages($(this));
            $(this).css('height', heightTallest);
        });
    };
});

Fiddle

Answer 8

After spending some time on it, I have finally put together the Fiddle and the JS-Code:

My approach considers the relative size of the elements and stretches them proportionally. For instance, a div that originally occupied 50% of the space will still maintain that percentage after being stretched in the ul.

(There may be challenges when dealing with padding and borders. If anyone has a solution for this, I would love to hear it!)

JS:

$(function() {
    var $allUl = $('ul');
    setNewPercentages($allUl);

    function getTallestUl($uls) {
        var max = 0;
        var $ulTallest;

        $uls.each(function(i,e) {
            console.log( $(this).height() > max);
            if( $(this).height() > max) {
                $ulTallest = $(this);
                max = $(this).height();
            }
        });

        return $ulTallest;
    };

    function adjustPercentages($ul) {
        $ul.find('li').each( function(i,e) {
            var $this = $(this)
            ,   ulHeight = $ul.height()
            ,   liHeight = $this.height()
            ,   percentage = (liHeight / ulHeight * 100);

            $this.css('height', percentage + '%');
        });
    };

    function setNewPercentages($uls) {
        var $tallest = getTallestUl($allUl).addClass('tallest');
        var heightTallest = $tallest.height();

        $uls.not('.tallest').each(function(i,e) {
            adjustPercentages($(this));
            $(this).css('height', heightTallest);
        });
    };
});

Fiddle

Answer 9

Answer №5

Perhaps this solution could be effective.

<table border="1">
<tr>
<td>
<table border="0">
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
</table>
</td>
<td>
<table border="0" cellpadding="5">
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
</table>
</td>
</tr>
</table>

Answer 10

Perhaps this solution could be effective.

<table border="1">
<tr>
<td>
<table border="0">
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
</table>
</td>
<td>
<table border="0" cellpadding="5">
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
</table>
</td>
</tr>
</table>

Answer 11

Answer №6

Regrettably, achieving this is quite a challenge... perhaps you could consider utilizing these : faux columns

Answer 12

Regrettably, achieving this is quite a challenge... perhaps you could consider utilizing these : faux columns

Answer 13

Answer №7

What do you think of this suggestion?

<table>
  <tr>
    <td>
      <div>Element1</div>
      <div>Element2</div>
      <div>Element3</div>
    </td>
    <td>
      <div>Element1</div>
      <div>Element2</div>
      <div>Element3</div>
      <div>Element4</div>
      <div>Element5</div>
    </td>
  </tr>
</table>

By using this method, both columns will maintain equal height. However, the contents in the shorter column may not expand to fill the empty space. It might be necessary to implement a Javascript solution for that.

Answer 14

What do you think of this suggestion?

<table>
  <tr>
    <td>
      <div>Element1</div>
      <div>Element2</div>
      <div>Element3</div>
    </td>
    <td>
      <div>Element1</div>
      <div>Element2</div>
      <div>Element3</div>
      <div>Element4</div>
      <div>Element5</div>
    </td>
  </tr>
</table>

By using this method, both columns will maintain equal height. However, the contents in the shorter column may not expand to fill the empty space. It might be necessary to implement a Javascript solution for that.

Two columns with varying item counts but equal overall height

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Resizing input fields with Bootstrap 4

Tips for implementing a for loop within a Bootstrap-Popover using JavaScript

Retrieve 2 values from a JSON array in a Node.js environment

Adjusting Headers Using Buttons

Is there a way to create an input mask that looks similar to this format --:--:--?

A guide to effortlessly importing JSON data with Svelte

Is there a way to retrieve the original value of the substr value?

Validation for HTML5 does not appear when inputmask is used for entering mobile numbers

What steps do I need to follow to send a POST request using JavaScript in Django while including the CSRF token?

Having trouble accessing the 'checked' property of the checkbox

Having trouble displaying PHP content above the footer section

Customize CSS in Razor/Sitecore

What is preventing my Button's onClick() method from being effective?

Mastering the flow of control in Node.js programs

Organizing month and year in angularjs: A step-by-step guide

Is there a way to display the button solely when the cursor is hovering over the color?

The Guide to Utilizing Autonomous Models in Directive

Issue: TypeError - history.push function is not recognized. This problem occurs sporadically

What is the best method to handle errors when retrieving JSON data and updating it using fetch()?

Javascript Error: Missing Object (SelectedIndex Property)