What is the best way to make one element match the height of another element?

I am facing an issue with the height of my two columns as I have another column separating them. The challenge is to make the left and right columns extend in height based on the content added to the center column.

One important point to consider is that setting an exact height for the parent div and then using "height: 100%" for the side columns is not a viable option due to varying amounts of content in the center column.

Below is my current HTML structure:

<div class="flight">
        <div class="flight_no">
            <p>QF2290</p>
        </div>
        <div class="legs">
            <div class="leg">
                <p>Details</p>
            </div>
            <div class="leg">
                <p>Details</p>
            </div>
        </div>
        <div class="price">
            <p>$2500</p>
        </div>
    </div>
    

And here is the corresponding CSS:

.flight
    {
        float: right;
        border: 1px solid green;
    }

    .flight .flight_no, .flight .price
    {
        border: 1px solid black;
        float: left;
        width: 100px;
        height: 100%;
        
    }

    .flight .legs
    {
        float:left;
    }

    .flight .legs .leg
    {
        border: 1px solid black;
        position: relative;
        height: 100px;
        width: 300px;
        margin: 20px 0px;
    }
    

Answer №1

If you're looking to tackle this problem, consider utilizing a Javascript strategy. One effective approach would involve obtaining the height of .legs and then applying it to both .flight_no and .price.

Alternatively, you could opt for a workaround by creating the illusion of equal heights using a background image within .flight, styled to match the appearance of your distinct left and right columns. You can then use repeat-y in your CSS to achieve the desired effect without actually having the sidebars span the same height.

To dynamically adjust the sidebars based on the middle column's height with jQuery, you can implement the following code snippet:

$(document).ready(function() {
  $(".flight_no, .price").css("height", $(".legs").height());
});

Update:

In light of evolving trends, jQuery has taken a backseat while Flexbox emerges as a powerful tool. Consider exploring column-based solutions through resources like this helpful Stack Overflow page:

CSS - Equal Height Columns?

Answer №2

To ensure the div extends to the correct height, or 100% height of the container, it is necessary to include height:100% up to the container with a fixed height or to the body using another height: 100%;. This approach will likely be needed in the long term.

In the absence of a fixed height, I utilized height: 100% and connected it to the body in HTML.

body, html { height: 100%; }
.flight
{
    float: right;
    border: 1px solid green;
    height: 100%;
}

See Demo

If you want the sidebars to have the exact height of the container, you must either set a fixed height or utilize JavaScript.

Answer №3

To achieve the desired layout, you can utilize CSS and apply the display: table property. This way, there is no need to resort to JavaScript for this task.

.col-container {
  display: table;
  width: 100%;
}
.col {
  display: table-cell;
}

<div class="col-container">
    <div class="col">
        Insert your content here
     </div>
    <div class="col">
        Add some content here, ensuring that both elements appear equal in size thanks to the implementation of display: table
    </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

Optimizing Static File Caching in Yii

Having a frustrating issue with Yii where my local development environment caches CSS and JS files. Despite making changes to the file, the edits do not reflect in the output and sometimes causes corruption leading to broken functionality. This problem see ...

Generate a dynamic vertical line that glides smoothly over the webpage, gradually shifting from one end to the other within a set duration using javascript

I have designed a calendar timeline using html. My goal is to implement a vertical line that moves from left to right as time progresses, overlaying all other html elements. This functionality is similar to Google Calendar's way of indicating the curr ...

Troubleshooting issues with sending email with attachments in PHP and HTML

I've been having trouble sending an email with an attachment file; it just doesn't seem to work and I can't seem to receive any files. Although my HTML syntax appears correct, as I haven't received any bounce-back emails, the issue per ...

Safari is unable to display the button text, while Chrome has no problem showing it

In Safari, the text of the button is not showing up properly. I am able to retrieve the text using jQuery in the console though. However, there seems to be an issue with recognizing the click event. <div class="btn-group btn-group-lg"> <button ...

The content will be visible when the masonry element is in the active state

I have been working on creating a unique image gallery effect using Masonry layout where the images start at 0.2 opacity and change to full opacity of 1 when hovered over. Additionally, I want each image to fade to 0.7 opacity with text "Petra, Jordan" app ...

Using makeStyles() in MUI for conditional rendering

Trying to dynamically change the value of backgroundColor under the property "& + $track" using props.disabled but it seems that MUI does not recognize it. Why could that be? const useStyles = makeStyles((theme) => ({ root: { overflow: "vis ...

CSS Dialect Debate: Container or Wrapper - Which is the Best Term to

Can you explain the distinction between a container and a wrapper, as well as their respective meanings? ...

Activate the function within the same class only for the selected item

Hello there, I'm struggling to grasp how to make this particular functionality work. Basically, I have 8 divs, each containing an image used as a button with the same class (tm-img), and hidden divs with additional information. My goal is to initiall ...

I am looking to expand the width of the Bootstrap container specifically for the Max width

I need to adjust the width of the Bootstrap container to be responsive on all devices, especially maximizing the width on larger screens. Can anyone provide guidance on how to achieve this? Thank you in advance. To view my website, please follow this link ...

What is the best way to position my content next to my sticky sidebar for optimal visibility?

Just starting out with coding and tackling my initial project using reactJs and bootstrap 5. My aim is to create a sticky side navbar that remains fixed on the side while my content displays next to it, even when navigating through different routes. Unfort ...

IE is notorious for not playing well with CSS

I am facing an issue with my Google search box code. It works perfectly on Firefox, Chrome, and other browsers except for Internet Explorer. Can anyone help me troubleshoot this? Below is the code snippet: Abulkas Tablet #outerContainer{ width: ...

Tips for enabling the wrap property with autogeneratecolumn set to true

In my grid view, I want to ensure that any text in a column that exceeds the width of the column will either wrap within the column or display on a new line. Below is the code for the grid view: <asp:GridView ID="GridView1" AllowSorting="True" runa ...

The sidebar in Semantic UI does not have a specified height for the form segment

Need help troubleshooting a button that slides out a vertical sidebar. I want to include a short form for users to input search queries within the sidebar. The issue seems to be with the heights of #search-sidebar and .ui.form.segment. Here is the code s ...

Is the XPath in Selenium executed against the Document Object Model (DOM) or the HTML file

Currently, I am in the process of developing a library for analyzing webpages. My approach involves using Selenium to access elements on a webpage through xpath. I have been contemplating replacing Selenium with an offline xpath tool. However, upon furthe ...

Looping through items with ng-repeat and creating a submenu with M

When constructing a menu from a JSON file with submenus using the JQuery.mmenu plugin, I encountered an issue when trying to implement the submenu structure with ng-repeat. The raw HTML approach worked perfectly, but as soon as I introduced ng-repeat to dy ...

Submitting a form with missing required information because the placeholder attribute is being used

I'm encountering an issue with my form where required fields can be submitted without any input. I want to use placeholder text, but it seems to be treated as a value, causing the form to submit successfully. I am utilizing the HTML5 'placeholde ...

Trouble with z-index | initial div out of four malfunctioning

Currently, I am attempting to practice by replicating the design shown in this image: https://i.sstatic.net/iIA2q.jpg However, I have encountered an issue that has been persisting for some time: https://i.sstatic.net/grABz.png I'm struggling to un ...

Ensuring draggable div remains fixed while scrolling through the page

I am currently working on creating a draggable menu for my website. The menu is functional and can be moved around the page as intended. However, I have encountered an issue where the menu disappears when scrolling down the page due to its position attrib ...

Passing an array of ID's between two components in Angular: A comprehensive guide

Greetings fellow readers, I have encountered a new challenge in my Angular project. I need to pass an array of IDs from one component to a completely unrelated component. Most solutions suggest using ViewChild, Input, or Output, but since the components ar ...

What is the best way to ensure a NavBar stays at the top of the page when it is not collapsed?

I have integrated a NavBar using Bootstrap 5, which functions flawlessly. However, I am facing a specific issue that I haven't been able to resolve yet: When a user increases their screen size to <300%, it triggers the collapse button to appear. I ...