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

Tips for customizing elements using Wordpress

Having trouble displaying the time in the middle square when pressing TouchableOpacity in React Native?

Proportional fluid image grid with responsive design

Issues with Autofocus while Searching and Selecting from Dropdown menu

Revolutionary custom binding with Bootstrap popover integration

Identify the browser dimensions and implement CSS styling for all screen resolutions

Adjusting the size of the background image without altering the background color

Align pandas data frame to the right within a Flask application

Creating dynamic dropdowns with Ajax and HTML on the code side

How do you go about indenting a paragraph in CSS following the insertion of

How to smoothly transition a div from one location to another using animations in an Ionic3-Angular4 application

Getting data in a ng-Dialog Modal with AngularJS is a breeze!

There seems to be an issue with node.js - headers cannot be set after they have already been sent to

Tips on achieving horizontal scrolling for div overflow instead of wrapping onto a new line

Multi-object retrieval feature in Material Dialog

Error: Attempting to access 'input_date' property of null object resulted in an uncaught type error

Creating a simple bootstrap code for developing plugins in Wordpress

The React Native File generator

Fetching data from the server using Angular and parsing it as JSON

Automatically update div content using AJAX in a different approach