Maintaining equal height for two columns using CSS techniques

I'm facing a challenge with two columns in a container, both having dynamic heights and different color backgrounds. I want the columns to always be the size of the taller one regardless of the content. How can I achieve this using CSS?

Here is the HTML structure:

<div id="profile-bottom">
    <div id="bottom-left">
    </div>
    <div id="bottom-right">
    </div>
</div>

I attempted to use display: table and table-cell properties, but I couldn't get it to work as expected.

Below is the CSS code:

#profile-bottom {
    display: table;
    position: relative;
    width: 450px;
    height: auto;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border-radius: 0px 0px 4px 4px;
    overflow: hidden;
    z-index: 10;
}

 #bottom-left {
    display: table-cell;
    position: relative;
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 95px 20px 20px 20px;
    height: auto;
    width: 150px;
    box-shadow: rgba(0, 0, 0, 0.147059) 0px 1px 8px 0px;
    background-color: #fff;
    z-index: 50;
}

#bottom-right {
    display: table-cell;
    position: relative;
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 0px 20px 20px 20px;
    height: auto;
    min-height: 96px;
    width: 220px;
    background-color: #f5f5f5;
    z-index: 10;
}

Answer №1

Here is the code snippet you requested: http://jsfiddle.net/ELKuf/

<div class="layout">
    <div class="columns-container">
        <div class="column">dasdas das das dsa kdas kdhsajk dhkas dhkjas kdsa dsa dsa as das dsa dsa das das das das dsa d asdsa
</div>
        <div class="column"> dsa dsa dsa das dsa</div>
    </div>
</div>


layout {
    display: table;
}

.layout .columns-container {
    display: table-row;
}

.layout .columns-container .column {
    display: table-cell;
    border: 1px solid black;
    width: 100px;
}

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

Utilizing mat dialog in conjunction with the bootstrap sticky top class to enhance functionality

I am encountering an issue where, upon clicking to delete an entry, a mat dialog should appear with everything else in the background greyed out. However, the problem I am facing is that when I attempt to delete an entry, the dialog appears but the sticky ...

What can be done to maintain column placement when using grid-row span?

In my CSS Grid layout, I have a 3 x 3 grid setup. Within a row, I have three items labeled A, B, and C. I am trying to make item C span two rows using grid-row: 1 / span 2, but it's not appearing in the correct column. It's showing up in the fi ...

How to Vertically Align an HTML Element Inside a Div with Changing Height

Similar Question: Issue with vertical alignment Is there a way to ensure that the <a></a> is always vertically centered within this div, regardless of its size? View example here Thank you! ...

navigating directly to a particular slide within a Bootstrap carousel on a different page by clicking

Attempting to set up a bootstrap build, where clicking on certain states on one page will direct the user to a specific slide on another page. I'm struggling to grasp this concept. A friend of mine, who is a Javascript developer, provided some code f ...

What is the best way to ensure that my search box is responsive in HTML and CSS while also horizontally centering the search_box div?

Question 1: I need assistance in making this search box responsive. Every time I try to adjust the screen width, the button ends up below the input field. How can I resolve this issue? Question 2: Is there a way to horizontally center the div class=" ...

The concept of min/max-width media query lacks grammatical coherence

I am struggling to grasp the concept of min-width and max-width media queries. If I were to create a media query, I would want it to look something like this (in pseudo-code).... if(screen.width < 420) { ApplyStyle(); } The idea of using terms l ...

There was an uncaught error in AngularJS stating that the URL in the HTTP request configuration must be a string

I've been working on a web application and have encountered some challenges. One particular issue I'm struggling with is related to the following code snippet: this.bookSpace = function (date, spaceId) { swal({ title: "Are you sure?", t ...

Mathematics - Determined the dimensions of an adjusted image size

Currently, I am implementing a basic mathematical method to crop an image. My approach involves utilizing the jQuery plugin called imageareaselect.js to overlay an adjustable layer on top of an image. By resizing this layer with the cursor and clicking a b ...

What is the best way to reset the values in react-multiple-datepicker?

Having trouble clearing values assigned in react-multiple-datepicker library. import MultipleDatePicker from "react-multiple-datepicker"; import React from "react"; class Addjob extends React.Component { constructor(props) { super ...

How can I select a specific value within an Autocomplete bar by clicking on it in the div ul li strong

I have a multitude of li tags nested under both div and ul. Each li tag contains a strong element: <div style="width:380px" id="autoComplete" class="suggest fl"> <div class="sWrap"> <div class="iconWrap"> <span ...

Intersecting interactions: Mouse events on flex boxes

I am facing a challenge in my React application where I have two panels with buttons displayed using flex properties. Below is a simplified version of the HTML/SCSS code that illustrates the setup: <div class="bottom-panel left"> <butt ...

Links have a longer transition delay compared to the content

In a unique JavaScript function I've developed, the my-content-section-visible class is removed and replaced with my-content-section-hidden. This change is being made to hide a particular div using a smooth transition effect. The transition itself is ...

Displaying a URL inside a div upon clicking a specified href link in an Angular application

After hours of searching on various search engines, I am still unable to find the solution to my problem. My goal is to display the URL in a div once it has been clicked using $http for dynamic links. Here's an example of what I'm trying to achi ...

The vertical tab is not appearing correctly within the modal across various browsers

While attempting to showcase a vertical tab inside a Bootstrap 4 Modal, I've encountered an issue where the same modal appears differently in Google Chrome versus Firefox browsers. Here is the code I am utilizing: <!-- Latest compiled and minif ...

Uploading and previewing multiple images on a canvas

After successfully creating single upload for images and placing them on canvas as seen in http://jsfiddle.net/StJnY/, I am now looking to adapt the script for multiple image uploads. Here is how I plan to modify the script: JS : $(function () { $(&a ...

Creating a canvas with multiple label introductions can be achieved by following these

I am looking to group labels and sublabels on the x-axis of a canvas component. Currently, I only have sublabels like: RTI_0, RTI_1... I would like to add labels to these sublabels like: RTI = {RTI_0,RTI_1,RTI_2] BB = {BB_0, BB_1,BB_2,BB_3] <div cla ...

Struggling to grasp the concept of Vue3 style binding

While browsing the Vue website, I came across a particular example that left me puzzled. Inside the <script> section, there is this code: const color = ref('green') function toggleColor() { color.value = color.value === 'green' ...

Hide when reaching the end with d-none

One of the challenges I'm facing is aligning a button to the right side of a column while still utilizing d-none to control its display. Previously, I used d-flex justify-content-md-around justify-content-lg-end for alignment before adding d-none, but ...

Assistance needed for Internet Explorer

When I designed a webpage in Firefox, everything looked great. However, when I opened it in Internet Explorer and resized the window to less than maximum size, half of the main div disappeared under the footer. If you want to see the issue for yourself, v ...

Utilizing Django to recycle an HTML block for multiple for loops within the same template

I have three specific states for an object - 1. to start, 2. started, and 3. finished. Upon filtering the objects in view, I pass three variables to the template - tostart_objects, started_objects, and finished_objects. My current approach involves loop ...