What is the best way to keep the heights of two divs in sync?

Question

What is the best way to keep the heights of two divs in sync?

Is there a way to make two divs have the same height, even though their content determines their individual heights? I am looking for a solution that doesn't involve using a table or a parent div. I'm new to JavaScript, so I'm hoping there is a way to achieve this without it. Here is the jsfiddle (I want to adjust the height of div C based on the height of div A and vice versa).

<div class="a">
    <brdsds><br><br><br><bdsdsr><br><br><br>ds<br>dsds<br>dsd
</div>
<div class="b">
    dsdds
</div>
<div class="c">
    dsdds
</div>

javascript html css

Answer 1

Answer №1

To implement display:table-cell, start by removing the float property and adding the following code:

div {
 width: 30px;
 display: table-cell; /*Include this*/
 /*float: left; Omit this*/
}

Take a look at this demonstration http://jsfiddle.net/8zPD2/1/

Prior to implementation, please refer to the Compatibility List

Answer 2

To implement display:table-cell, start by removing the float property and adding the following code:

div {
 width: 30px;
 display: table-cell; /*Include this*/
 /*float: left; Omit this*/
}

Take a look at this demonstration http://jsfiddle.net/8zPD2/1/

Prior to implementation, please refer to the Compatibility List

Answer 3

Answer №2

To achieve the desired result, you can apply the following CSS:

.a,
.c {
  max-height: 200px;
}

Answer 4

To achieve the desired result, you can apply the following CSS:

.a,
.c {
  max-height: 200px;
}

Answer 5

Answer №3

Give this a shot:

<div class="container">
  <div class="column">
    <p>Lorem ipsum dolor sit amet.</p>
    <b>Some text here</b>
  </div>
  <div class="column">
    Some more text
  </div>
  <div class="column">
    More content goes here
  </div>

Here's the CSS for it:

.container{
    display:flex;
 }

.column{
   height: 100%;
}

Answer 6

Give this a shot:

<div class="container">
  <div class="column">
    <p>Lorem ipsum dolor sit amet.</p>
    <b>Some text here</b>
  </div>
  <div class="column">
    Some more text
  </div>
  <div class="column">
    More content goes here
  </div>

Here's the CSS for it:

.container{
    display:flex;
 }

.column{
   height: 100%;
}

Answer 7

Answer №4

To experiment with this code snippet in JavaScript, you can utilize the following code:

VIEW DEMO

$(function(){ 
setHeight = function (source, target) { 
var height = source.height(); 
target.css('height', height + 'px'); 
} 
contentDiv = $('.a'); 
imageWrapper = $('.b'); 
setHeight(contentDiv, imageWrapper); 
});

Answer 8

To experiment with this code snippet in JavaScript, you can utilize the following code:

VIEW DEMO

$(function(){ 
setHeight = function (source, target) { 
var height = source.height(); 
target.css('height', height + 'px'); 
} 
contentDiv = $('.a'); 
imageWrapper = $('.b'); 
setHeight(contentDiv, imageWrapper); 
});

Answer 9

Answer №5

To make your div behave like a table cell, simply set the CSS property to display: table-cell and remove any instances of float: left.

Styling with CSS

div {
    display: table-cell;
    width: 30px;
}

.a {
    background-color: #e9d8b7;
}

.b {
    background-color: blue;
}

For an example, visit: http://jsfiddle.net/8zPD2/6/

Answer 10

To make your div behave like a table cell, simply set the CSS property to display: table-cell and remove any instances of float: left.

Styling with CSS

div {
    display: table-cell;
    width: 30px;
}

.a {
    background-color: #e9d8b7;
}

.b {
    background-color: blue;
}

For an example, visit: http://jsfiddle.net/8zPD2/6/

Answer 11

Answer №6

To set the minimum height to match the highest div in terms of height, you can use the following CSS code. If you do not know which div has the highest height, this approach may not be possible using just CSS.

.a,.b,.c{ min-height:200px; max-height:400px; }

Answer 12

To set the minimum height to match the highest div in terms of height, you can use the following CSS code. If you do not know which div has the highest height, this approach may not be possible using just CSS.

.a,.b,.c{ min-height:200px; max-height:400px; }

What is the best way to keep the heights of two divs in sync?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Error: Unable to locate Buffer2

Guide on how to conditionally display a button or link in a Next.js Component using TypeScript

Utilizing Z-index for the arrangement of DIVs and elements in a webpage

Overlapping dynamic content causing CSS nested scrollbars to clash at full width of 100%

Guide to changing an image on a canvas with KineticJS

The error message "Unable to iterate over undefined property in Node.js using EJS and JavaScript" popped up

What is the process for managing items in an array within a separate file?

Dynamic Sizing of Inline Input Fields in Bootstrap 3 Using Narrow Columns

Tips to enhance web page loading speed when parsing JSON data from a URL

Sorting columns containing English, Japanese entries, and null values using a customized sorting algorithm in MUI Data Grid is a straightforward process

Gulp and Vinyl-fs not functioning properly when trying to save in the same folder as the source file due to issues with

Enhancing jQuery Mobile listview with voting buttons on each item row

Neglect variables that have not been declared (TypeScript)

Deactivate a specific button within a row on a Primeng table by clicking on it

arranging fashionable divs side by side

What could be the reason behind a CSS caption overlapping another image within this table?

Retrieve JSON data from an external link and showcase it within a div, unfortunately encountering an issue with the functionality

Guide to updating information in Firestore using Node.js, embedded in a map array

Creating a Dynamic Navigation Bar using React and NextJS

Click the 'expand' button for additional details on every row in the table