How can I ensure that two links are equal in height when placed in columns?

Question

How can I ensure that two links are equal in height when placed in columns?

I am working with an unordered list on a webpage that contains

x <li><a href="#">Link text</a></li>

items.

These items are styled to have 50% width each using CSS, resulting in 2 items per line. However, since the link texts can vary in height, I am facing an issue where the links on the same line may have different heights. My question is: how can I use jQuery to set the same height for all links (styled with a border bottom) on the same line? It is important to note that not all links in the sections should have the same height, only those on a "per line" basis.

I hope this explanation is clear :)

jquery css

Answer 1

Answer №1

If you aim to achieve a layout that features a grid design along with varying row heights, the only viable option in HTML is by utilizing the table element.

However, be prepared to compromise the semantic structure of your code in order to attain the desired visual appeal.

To implement this layout, consider creating a two-column table and transferring the content from your previous li elements into the respective td elements within the table. Utilize properties like vertical-align and CSS styles to customize the appearance based on your design preferences.

Answer 2

If you aim to achieve a layout that features a grid design along with varying row heights, the only viable option in HTML is by utilizing the table element.

However, be prepared to compromise the semantic structure of your code in order to attain the desired visual appeal.

To implement this layout, consider creating a two-column table and transferring the content from your previous li elements into the respective td elements within the table. Utilize properties like vertical-align and CSS styles to customize the appearance based on your design preferences.

Answer 3

Answer №2

Here is the fiddle link: http://jsfiddle.net/aSJSm/1/

Below is the code snippet:

<html> :

<ul>
<li><a href="javascript:void(0)">Item1 bla bla bla</a></li>
<li><a href="javascript:void(0)">Item2</a></li>
<li><a href="javascript:void(0)">Item3</a></li>
<li><a href="javascript:void(0)">Item4 ala bala bala</a></li>
<li><a href="javascript:void(0)">Item5</a></li>
<li><a href="javascript:void(0)">Item6</a></li>
<li><a href="javascript:void(0)">Item7</a></li>
<li><a href="javascript:void(0)">Item8</a></li>
</ul>

<css> :

ul{
 width: 200px;   
 float:none;
}
ul li a{
 width: 50%;   
 float: left;   
 border-bottom: 1px solid black;    
}

<javascript> :

var setList = function(){
    var listItems = $('ul').children();
    $.each(listItems, function(index){
        if (index % 2 == 0){
            var leftElementHeight = $(this).children('a').height();
            var rightElementHeight = $(this).next().children('a').height();
            if (leftElementHeight < rightElementHeight)
                $(this).children('a').css("height", rightElementHeight);
            else
                $(this).next().children('a').css("height", leftElementHeight);
        }    
    });
}
setList();

Remember to wrap it in $(document).ready(function(){}) and ensure you have the latest version of jQuery.

Answer 4

Here is the fiddle link: http://jsfiddle.net/aSJSm/1/

Below is the code snippet:

<html> :

<ul>
<li><a href="javascript:void(0)">Item1 bla bla bla</a></li>
<li><a href="javascript:void(0)">Item2</a></li>
<li><a href="javascript:void(0)">Item3</a></li>
<li><a href="javascript:void(0)">Item4 ala bala bala</a></li>
<li><a href="javascript:void(0)">Item5</a></li>
<li><a href="javascript:void(0)">Item6</a></li>
<li><a href="javascript:void(0)">Item7</a></li>
<li><a href="javascript:void(0)">Item8</a></li>
</ul>

<css> :

ul{
 width: 200px;   
 float:none;
}
ul li a{
 width: 50%;   
 float: left;   
 border-bottom: 1px solid black;    
}

<javascript> :

var setList = function(){
    var listItems = $('ul').children();
    $.each(listItems, function(index){
        if (index % 2 == 0){
            var leftElementHeight = $(this).children('a').height();
            var rightElementHeight = $(this).next().children('a').height();
            if (leftElementHeight < rightElementHeight)
                $(this).children('a').css("height", rightElementHeight);
            else
                $(this).next().children('a').css("height", leftElementHeight);
        }    
    });
}
setList();

Remember to wrap it in $(document).ready(function(){}) and ensure you have the latest version of jQuery.

Answer 5

Answer №3

For those interested in achieving this functionality using jQuery, here is a method that can be employed:

$('li:even').each(function(){ 

    var leftHeight = $(this).height();
    var rightHeight = $(this).next().height();

    var newHeight = (leftHeight <= rightHeight) ? rightHeight : leftHeight;

    $(this).next().andSelf().height(newHeight);

});

Check it out on JSFiddle: http://jsfiddle.net/svenhanssen/VEnXp/

Answer 6

For those interested in achieving this functionality using jQuery, here is a method that can be employed:

$('li:even').each(function(){ 

    var leftHeight = $(this).height();
    var rightHeight = $(this).next().height();

    var newHeight = (leftHeight <= rightHeight) ? rightHeight : leftHeight;

    $(this).next().andSelf().height(newHeight);

});

Check it out on JSFiddle: http://jsfiddle.net/svenhanssen/VEnXp/

Answer 7

Answer №4

Assign an identifier to 2 hyperlinks and adjust their height using the provided technique.

$("#identifier").css("height", '100px');

Answer 8

Assign an identifier to 2 hyperlinks and adjust their height using the provided technique.

$("#identifier").css("height", '100px');

How can I ensure that two links are equal in height when placed in columns?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

acquiring the jQuery $.load() function for AJAX request object

Customize context menu events based on the exact section where the menu was activated

What is the best way to remove the border from bootstrap 4 cards?

Keeping track of the toggle state using a cookie

Creating an image in JavaScript from PNG data

Discovering Unnecessary CSS & JS Code

The responsive navigation bar yielded an unforeseen outcome

Parent div is positioned absolutely with overflow set to hidden

The identifier element.id is not acknowledged as a valid variable name

Exploring the possibilities of accessing a PHP array with jQuery

"Exploring the relationship between Javascript objects and the '

How can I change the text color in a QTextBrowser using HTML in PyQt?

Javascript problem with adding floats

Prevent double tap selection

Is it possible to add a computed value to the bar's end in Chart.JS?

What is the best way to format MarkDown content within a nextJs environment?

The functionality of the Kendo dropdown menu is experiencing issues on Internet Explorer 8

Using WebApi 2.2 with the Chrome browser may cause a CORS 405 error to occur

What is the best method to "deactivate" a radio button while ensuring that a screen reader can still read the text and notify the user that it is inactive?

Preserving the selected options in a dynamically populated dropdown list after submitting a form using php