Ways to make the height of two div elements the same using CSS

Question

Ways to make the height of two div elements the same using CSS

I need to ensure that the height of two div's is equal, with one stretching to match the height of the other if necessary. I am looking for a solution using only CSS. Here is the code I have so far (Fiddle Link):

HTML:

<div class="common">
    lorem ipusm random text just for check
</div>
<div class="common">
    lorem ipusm random text just for check lorem ipusm random text just for check
</div>

CSS:

.common{
  border:1px solid red;
  float:left;
  margin-left:5px;
  width:20%;
  padding:5px;
}

Check out the fiddle for more details.

html css

Answer 1

Answer №1

To achieve a responsive layout, consider using the powerful flexbox model. Simply create a container for the divs and apply display: flex to the parent element, along with flex: 1 for the children.

Check out the updated code on jsfiddle

For more in-depth information on flexbox, visit http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

To achieve a responsive layout, consider using the powerful flexbox model. Simply create a container for the divs and apply display: flex to the parent element, along with flex: 1 for the children.

Check out the updated code on jsfiddle

For more in-depth information on flexbox, visit http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

Answer №2

In my opinion, you have two options to choose from: either utilize a table structure or implement JavaScript for equalizing heights.

.wrapper{
    display:table;
    border: 1px solid blue;
    width: 250px;
}
.item{
    display: table-cell;
    border: 1px dashed orange;
    padding: 10px;
}

table example

Alternatively, you can achieve the same result using the following JavaScript code:

var maxHeight = 0;
$('.item').each(function(){
    var height = $(this).height();
    if(height > maxHeight){
        maxHeight = height;
    }
})

$('.item').each(function(){
    $(this).height(maxHeight);
})

JavaScript solution

Answer 4

In my opinion, you have two options to choose from: either utilize a table structure or implement JavaScript for equalizing heights.

.wrapper{
    display:table;
    border: 1px solid blue;
    width: 250px;
}
.item{
    display: table-cell;
    border: 1px dashed orange;
    padding: 10px;
}

table example

Alternatively, you can achieve the same result using the following JavaScript code:

var maxHeight = 0;
$('.item').each(function(){
    var height = $(this).height();
    if(height > maxHeight){
        maxHeight = height;
    }
})

$('.item').each(function(){
    $(this).height(maxHeight);
})

JavaScript solution

Answer 5

Answer №3

The CSS attribute responsible for determining the vertical size of elements is known as height.

Negative values are not accepted by the height property. When a percentage is used, it references the height of the parent element. If the parent element does not have a specific height defined, it defaults to auto height.

The value 'inherit' means that the element's height is inherited from its parent. By using the 'auto' value, the browser will automatically calculate the element's height based on its content and available space on the page.

In addition to height, CSS also includes min-height and max-height properties for controlling element sizes.

.common{
  border:1px solid blue;
  float:right;
  margin-right:10px;
  min-height: 150px;
  width:25%;
  padding:10px;
}

For further details, visit Height

Answer 6

The CSS attribute responsible for determining the vertical size of elements is known as height.

Negative values are not accepted by the height property. When a percentage is used, it references the height of the parent element. If the parent element does not have a specific height defined, it defaults to auto height.

The value 'inherit' means that the element's height is inherited from its parent. By using the 'auto' value, the browser will automatically calculate the element's height based on its content and available space on the page.

In addition to height, CSS also includes min-height and max-height properties for controlling element sizes.

.common{
  border:1px solid blue;
  float:right;
  margin-right:10px;
  min-height: 150px;
  width:25%;
  padding:10px;
}

For further details, visit Height

Ways to make the height of two div elements the same using CSS

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing a Text Box, HTML, and Javascript to Showcase a PDF within an iFrame

Phone website doesn't display properly on mobile device (CSS and HTML)

Set the input of a component in Angular to determine its width

What is the best way to center the startIcon material ui icon?

Tips for arranging buttons horizontally in Angular

Attempting to load the parent window of a framed page from a separate domain results in a permission denial issue in Internet

Limit the y-axis on CanvasJS visualization

When using NextJs, running the commands 'npm build' and 'npm start' can sometimes cause style inconsistencies

Tips for populating a row in the Bootstrap grid with the assistance of the mr or ml classes

Utilizing React Material UI to divide the screen in half with one half being scrollable and the other half remaining fixed using UI Grid

What methods are most effective for designing a static side panel featuring a personalized tree-style list?

Navigating to the following webpage with Selenium using Python

I am currently facing an issue with validating forms in JavaScript Document Object Model (DOM)

Function is raising an error with the wrong value or text

Having trouble showing an image with jQuery after it has been uploaded

What is the best way to use CSS to evenly lay out a group of dynamically generated buttons?

Interactively scroll through div content using both horizontal and vertical movements with mouse wheel

Steps to modify the background-color of an iFrame using CSS

Having trouble invoking PHP functions from AngularJS

Difficulty with the D3.js grid and tick functionality