Home/ Questions/Q 6041705
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T06:42:00+00:00

I have a given markup that I’m trying to apply to some style on.

  • 0

I have a given markup that I’m trying to apply to some style on. Having little (but some) flexibility with the markup, and would ideally like to do this in CSS only, if possible.

Each of the <li>‘s divs are of variable height based on content, but in the end, I would like to end up with all <li>s of equal height (height of largest column).

What is the best way of doing this?

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Table row</title>
<style type="text/css" media="screen">
body {
    margin:0;
    padding:0;
}

ul
{
    list-style-type: none;
    background-color: yellow;
}

li
{
    display: inline-block;
}

li div
{
    width:200px;
}
</style>
</head>

<body>
<ul>
    <li>
        <div class="divA" style="background-color:red;">
        hello<br/>world
        </div>
    </li>
    <li>
        <div class="divB"  style="background-color:blue;"/>
        hello<br/>world hello<br/>world
        </div>
    </li>
    <li>
        <div class="divC" style="background-color:green;"/>
        hello<br/>world hello<br/>world hello<br/>world
        </div>
    </li>
    </ul>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you want every <li> to have the height of the tallest <li>, these are your options:

    • Hardcode the height of the <li>s, or
    • Use JavaScript to programmatically compute and apply the height, or
    • Use a table.
    • 0