Setting the height using CSS so it matches the height of the following class

Could someone assist me with a question I have? I am using a CSS class in my HTML code, like this:

.boxBooking {
  width: 14.28%;
}
<div class="boxBooking">
  ....
</div>

<div class="boxBooking">
  test<br/> test
  <br/>
</div>

<div class="boxBooking">
  a<br/> b
  <br/> c
  <br/> d
  <br/>
</div>

My issue is that when I set the height property in CSS, it does not dynamically adjust to the "highest" element in my HTML.

I want the height of each element to match the height of the tallest one, regardless of whether the others have content or not. Is there a way to achieve this and how can I do it?

htmlcssheight

Answer №1

If you want to ensure that all boxBooking divs have the same height, consider using flex-box. Wrap the boxBooking divs within a wrapper div and set it to display: flex. Then, for each div inside, set flex-grow: 1 so they all occupy equal space.

To visually demonstrate this equality in height, I have added a red border around each of them.

.boxBooking-wrapper  {
display: flex;
}

.boxBooking{
width:14.28%;
flex-grow:1;
border: solid 1px red;
}
<div class="boxBooking-wrapper">
  <div class="boxBooking">
  </div>

<div class="boxBooking">
  test<br/>
  test<br/>
</div>

  <div class="boxBooking">
    a<br/>
    b<br/>
    c<br/>
    d<br/>
  </div>
</div>

Answer №2

Give it a shot with flexbox and see the updated snippet below:

.main {
  display: flex;
}

.boxBooking {
  width: 100%;
  border: 1px solid red;
  margin: 2px;
}
<div class="main">
  <div class="boxBooking">

  </div>

  <div class="boxBooking">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </div>

  <div class="boxBooking">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  </div>
</div>

Answer №3

Try using the CSS property display:table/table-cell

.boxBooking-wrapper  {
  display:table;
  
}


.boxBooking{
  width:14.28%;
  display:table-cell;
  border: 1px solid black;
}
<div class="boxBooking-wrapper">
  <div class="boxBooking">
  </div>

<div class="boxBooking">
  test<br/>
  test<br/>
</div>

  <div class="boxBooking">
    a<br/>
    b<br/>
    c<br/>
    d<br/>
  </div>
</div>

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

Expanding the padding of the selected item to create more breathing room

Upon examining the following: https://jsfiddle.net/h8kmove5/27/ Let's say you select 9 at the bottom. The display shows 8 9 10. My intention is to create some additional space on either side of 9, or any other active item for that matter. This way, ...

javascriptjqueryhtmlcssowl-carousel

How to toggle the display of a div by its id using index in Javascript

Currently, I am encountering a problem with toggling the div containers. When I click on the video button, I want the other divs to close if they are already open. However, due to the toggling mechanism, if a div is closed and I click on the corresponding ...

javascripthtmlangular

Why isn't the JavaScript if statement working properly when checking the length?

Below is an if statement that I have devised: var TotalMoney=0; var Orbs=0; if (TotalMoney.length==2) { Orbs+=1; } The intention behind this code snippet is to increase the value of "Orbs" by 1 when the digit length of "TotalMoney" equals 2. However, it& ...

javascripthtmlcssif-statementconditional-statements

Analyzing neglected CSS in intricate websites

While there are tools available to identify unused CSS on static web pages, real-world scenarios often involve CSS being used dynamically after interactions such as opening modals or popups. How can we effectively manage our ever-growing render-blocking CS ...

htmlcss

The external javascript file is unable to recognize the HTML table rows that are dynamically inserted through an AJAX request

I have a situation where I'm pulling data from an SQL database and integrating it into my existing HTML table row. Here's the code snippet: Using Ajax to fetch data upon clicking analyze_submit: $(document).ready(function(e) { $('#anal ...

javascriptjqueryhtmlajax

Conceal the prominent image when viewing a single post

I've been attempting to hide the featured image on single post view but so far, neither a plugin nor the theme panel option has worked for me. I even tried adding custom CSS code without success. Is there another method that can be used to hide the fe ...

css

The height of the Bootstrap Sidebar is not displaying correctly

Currently, I am working on developing a traditional sidebar layout for the left portion of my template using Bootstrap 4. Here is the code snippet I have implemented: <nav class="team-left-column col-12 col-md-4 col-lg-2" style="background-color: ...

htmlcssbootstrap-4frontendsidebar

Incorporating text into the border without increasing the spacing

I managed to create a unique CSS shape using clip paths as the border of a div. However, I am now facing an issue where I cannot add text to this border without it getting cut off due to the way the shape was created (possibly because of overflow: hidden). ...

htmlcss

Is it possible for me to identify the quantity of children in CSS when the number of children surpasses four?

Is it necessary to style each child when the number of children exceeds four, within a parent element? I am aware of the nth-child(4) ~ child method, but this only targets the siblings that come after the fourth child. In this scenario, do I need to style ...

htmlcss

Executing a script for every row in a table using Python and Selenium

As a newcomer to Python and Selenium, I have been struggling with a specific task for days now. Despite my efforts to search and experiment, I find myself completely stuck. My goal is to access sales records within a table that contains information about ...

pythonhtmlseleniumhtml-table

Anomalies observed in label transition while in active state for input field

Can you explain why there is a gap in the label when it's positioned at left:0? I'm aiming to achieve a UI similar to Material design but struggling with label positioning. I've experimented with using translateY(-6px), however, this method ...

htmlcsstransition

Fixing My Code with JQuery Tabs and Hyperlinking

I have come across a problem while using multiple pages with jQuery tabs. Let's consider Page1.html with #tab1 and #tab2, and Page2.html with #tab3 and #tab4. Here are the issues I am facing: 1) Within the tab content of Page1.html#tab2, there is a h ...

javascriptjqueryhtmltabshyperlink

Add CSS styles to the outermost container element when the slideshow is currently in use

On my homepage, I have a carousel featuring multiple slides. However, when the third slide appears in the carousel, the positioning of the carousel buttons within the div class="rotator-controls" shifts downward due to the space taken up by the image. My o ...

javascriptjquerycsscycle2

Combining selected boxes through merging

Looking to create a simple webpage with the following requirements: There should be 10 rows and 3 boxes in each row. If I select 2 or more boxes or drag a box, they should merge together. For example, if my initial screen looks like this: and then I se ...

javascriptjquerycssjquery-uijquery-ui-selectable

the ajax success function is malfunctioning

I'm encountering an issue with my ajax function. I am trying to change the CSS for certain HTML elements on 'success', using the following code: success:function(d){ $('#name').css('weight','normal'); ...

jquerycssajax

CSS for the root folder of an ASP.NET website

After deciding to venture into ASP.NET, I quickly encountered my first obstacle. The folder structure is as follows: \ ->Admin -->Admin.Aspx ->CSS -->Style.css ->Images -->bg.gif Default.aspx Default.master Both admin.aspx and ...

asp.nethtmlcss

Instructions on how to toggle the visibility of a div when hovering over a different a tag

To keep things simple, I'm looking to create a visibility toggle effect on a div when someone hovers over an anchor tag. Similar to the behavior of the four buttons on this example link: The issue I'm facing is that I want the div to appear or b ...

javascriptjqueryhtmlcssjquery-ui

What is the most effective method for incorporating keyframes using JavaScript in a dynamic way?

Is there a way to animate an HTML element by using a variable with keyframes, but without directly manipulating the DOM? Below is the HTML code: <div class="pawn" id="pawn1"></div> Here is the CSS keyframes code: @keyframe ...

javascriptcsswebdom

Adjacent components

I have a query regarding the utilization of Angular. I aim to align the sentences side by side. These are two distinct components that I developed. I wish for recipe-list and recipes-details to function properly, with both statements displayed alongside ...

cssangular

Exploring the jungle. Cursor acting strange while dragging

I am currently working on implementing drag-and-drop functionality in my project, utilizing slip.js from slip.js. To enhance the cursor during dragging, I have assigned class="draggable" to each draggable <tr>. The CSS code for this class is: .drag ...

csssafaridrag-and-dropcross-browsercursor