Aligning columns for divs with varying heights in CSS

I have been working on aligning divs with varying heights and encountered a challenge. To view the layout I am referring to, check out this JSFiddle link: jsfiddle

Based on the example provided, if there is only one child element it should be centered. However, if there are multiple children, they should be displayed side by side in 2 columns. I managed to achieve this using flexbox. The issue I am facing now is that when the height of the children is large, it leaves a significant gap above the box labeled as "weird space above this box" in the fiddle.

SCSS code:

body {
  background: grey;  
}
.container {
  max-width: 500px;
  ul {
    list-style-type: none;
    background: white;
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    >li {
      border: 2px solid black;
      width: 42%;
      height: fit-content;
      padding: 5px;
      margin: 10px;
    }
  }
}

HTML:

<div class="container">
  <ul class="parent">
    <li>child 1 </li>
  </ul>
</div>

<div class="container">

  <ul class="parent">
    <li>child 1 </li>
    <li>child 2 child 2</li>
  </ul>
</div>

<div class="container">

  <ul class="parent">
    <li>child 1 </li>
    <li>child 2 child 2</li>
    <li>child child child child child child child child v child child child child child child child child child child child child child child </li>
    <li>child child</li>
    <li>child child</li>
    <li>weird space above this box</li>
    <li>child child</li>
  </ul>
</div>

Answer №1

It appears that you are seeking for both columns to have the same height. Simply delete height: fit-content; from the > li css section and the heights will adjust to be equal.

Answer №2

To allow both children to take up full height, simply delete the height property from the child element.

height: fit-content;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular is responsible for generating excessive space

I have a component called members that contains individual member components. When I use the members component as static code, everything works fine: <div class="row bg-light justify-content-center py-4"> <div class="col-lg-8"> <h3 c ...

AngularJS 1: Dynamically updating input values in real-time

Hey everyone, I'm experimenting with Angular and have encountered a roadblock. I am trying to assign values to an input element using ng-repeat for a list of parameters. <input type="text" ng-model="parameters.inParameterName" class="form-control ...

Avoiding line breaks when using an :after pseudo element

I am trying to style external links by adding a pseudo :after element right after the link itself, but I'm having trouble getting it to work on the same line. Here is the CSS code I have: a:not([href*="domain"])::after { content: url(data:image/svg+ ...

Automatic closure of Info Window on Google Maps is not functioning as expected

I have recently developed a map which you can view here. The issue I am facing is that when I click on the layers to see the InfoWindow, they do not automatically close when I click on another layer. The JavaScript code I am using is causing this problem. ...

Adjusting font size, contrast, brightness, and sound levels on a website with the help of jQuery

My client has a new requirement: adding functionality to increase font size, adjust contrast/brightness, and control sound on his website. When clicking on any of the control images, a slider should appear for the user to make adjustments accordingly. Ho ...

Positioning tooltip arrows in Highcharts

I'm attempting to modify the Highcharts tooltip for a stacked column chart in order to have the arrow on the tooltip point to the center of the bar. I understand that I can utilize the positioner callback to adjust the tooltip's position, but it ...

How can I achieve a fade-in effect whenever the flag image is clicked?

A unique "international" quotes script has been created, showcasing Dutch, English, German, and French quotes. The script displays different quotes every day, with a draft-result visible in the upper right corner of this page ... The code used for this sc ...

What is the most effective way to navigate to a different web page without relying on Javascript

I am implementing a script on my default page that redirects users to language-specific versions of my website based on their browser's language. I also want to redirect users who do not have JavaScript enabled. Currently, I have the following code: ...

Is there a way to display the back and forward buttons on a popup window opened through window.open or self.open in Chrome browser?

When I try to open a popup window using the code snippet below, I am facing some issues. self.open('myJSPPage','ServicePopUp','height=600,width=800,resizable=yes,scrollbars=yes,toolbar=yes,menubar=yes,location=yes'); Afte ...

Ways to access Windows Explorer by clicking on a link?

Is there a way to access a folder in Windows Explorer directly from an HTML website using a hyperlink? Currently, the following code only opens the folder within the web browser: <a href="file:///folder">Open Folder in Windows Explorer</a> ...

Is there a way for AJAX to dynamically insert new rows into a table?

I am seeking assistance in dynamically adding rows to an HTML table using AJAX whenever additional records are retrieved from a database query. My workflow involves utilizing Python Flask and Pandas to generate a dataframe containing information about node ...

Is it possible to customize the icon or color of the filter on a Kendo UI grid?

When I am filtering a kendo grid, I need to change the color of the "watering can" icon that appears above the columns. I have found a way to run my code on the filtering event: var originalFilter = self.object.data("kendoGrid").dataSource.filter; self.o ...

Unable to adjust the size of a DIV with a button click in Vue3

I am having trouble resizing a DIV block in Vue3. Whenever I click the button, I receive an error message saying "Cannot read properties of undefined (reading 'style')". I know there is an issue with the JS part of the code, but I'm not sure ...

Unable to place text inside an image using Bootstrap

My issue pertains to text placement on images, which is behaving oddly in my code. The problem seems to stem from a hover system I have implemented, where the text only displays correctly when triggered by a hover event. My code snippet below addresses the ...

Tips for creating a button hover effect with dynamic color and opacity

On my webpage, the button color is determined by an admin using JavaScript on page load. Since I don't know what color will be used, I can't apply rgba(). While using opacity does change the button's color, it also affects the text, which is ...

Is there a possible CSS-only alternative to the calc() function that can be used as a fallback

I'm aware of a CSS backup plan for calc() in IE6-7. Also, I've come across an alternative using jQuery. But what about a CSS-only substitute for calc() specifically for IE8? Is there one available? ...

Is there a way to verify the existence of a specific error in the console?

There seems to be a conflict between a WordPress plugin or code left behind by the previous programmer, causing the WordPress admin bar to always remain visible. While no error is triggered for admins, visitors may encounter a console error. My goal is to ...

Can jQuery or CSS selectors use parentheses?

In the structure of my webpage, there are two main DIV elements labeled as #div1 and #div2. Each of these parent DIVs has child DIV elements within them. I am looking to use jQuery to select all of these child DIVs from both parents simultaneously. <di ...

What is causing the click event to not fire in this straightforward jsfiddle demonstration?

While attempting to create a demonstration on jsfiddle, I encountered an issue where the click event for the toggle button is not firing. An error message stating myclick is not defined appears. I have researched other solutions that suggest using the No ...

Verification of user input in open-text fields

After conducting extensive research on form validation in PHP, I realized that most tutorials focus on validating specific fields such as names, emails, or dates using regex. However, I am facing a challenge when it comes to validating free-form fields lik ...