Is it possible to have 3 divs with the height of the tallest

Question

Is it possible to have 3 divs with the height of the tallest

I have a unique template that I employ for crafting responsive websites. It relies on boxes with percentage widths, floats, and clears. A prime instance can be viewed via this link. Notice how the three boxes vary in height. While it's simple to set a fixed height, problems arise when the content extends beyond causing one box to grow larger than others.

Is there a straightforward approach to make all three boxes match the height of the tallest div?

Find below the CSS pertaining to the boxes and the media query.

.clear{clear:both;}
.box{float:left; margin:1%; padding:1.5%; background:#6f0100;}
.box p.small{font-size:1.1em; margin-bottom:7px;}

... (CSS continued)

Your insight on this matter is greatly appreciated. Thank you.

jquery html css web

Answer 1

Answer №1

Check out the DEMO Give this method a try to achieve equal height columns

CSS:

.box {
    display:table;
}
.row {
    display:table-row;
}
.row div {
    display:table-cell;
    background-color:#ccc;
}

HTML

<div class="box">
    <div class="row">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
 </div>

Answer 2

Check out the DEMO Give this method a try to achieve equal height columns

CSS:

.box {
    display:table;
}
.row {
    display:table-row;
}
.row div {
    display:table-cell;
    background-color:#ccc;
}

HTML

<div class="box">
    <div class="row">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
 </div>

Answer 3

Answer №2

If you're searching for a jQuery solution, here is an example of how it can be implemented:

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

Answer 4

If you're searching for a jQuery solution, here is an example of how it can be implemented:

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

Answer 5

Answer №3

If you're not concerned with ancient browser support, you have the option to create equal height columns using pure CSS with the help of CSS3 flexboxes.

For instance:

HTML

<section id="container">
  <div class="column"></div>
  <div class="column">
    <p>Lorem ipsum ... elit.</p>
  </div>
  <div class="column"></div>
</section>

CSS

#container {
display: flex;
}
.column {
width: 33.3%;
}

Live Demo

Explore more about flexboxes on CSSTricks

Answer 6

If you're not concerned with ancient browser support, you have the option to create equal height columns using pure CSS with the help of CSS3 flexboxes.

For instance:

HTML

<section id="container">
  <div class="column"></div>
  <div class="column">
    <p>Lorem ipsum ... elit.</p>
  </div>
  <div class="column"></div>
</section>

CSS

#container {
display: flex;
}
.column {
width: 33.3%;
}

Live Demo

Explore more about flexboxes on CSSTricks

Answer 7

Answer №4

Here is the updated CSS code that you can replace in your existing stylesheet. Feel free to test it out on this DEMO.

Important: Make sure to only modify these specific lines.

.row{display:table; border-spacing: 20px;}
.box {background:#6f0100; margin: 1%; padding: 1.5%; display:table-cell;}

Answer 8

Here is the updated CSS code that you can replace in your existing stylesheet. Feel free to test it out on this DEMO.

Important: Make sure to only modify these specific lines.

.row{display:table; border-spacing: 20px;}
.box {background:#6f0100; margin: 1%; padding: 1.5%; display:table-cell;}

Answer 9

Answer №5

Include the below css styles

#allcontent .row {
    display: flex;
}
.box.box33 {
    flex: 1;
}

Answer 10

Include the below css styles

#allcontent .row {
    display: flex;
}
.box.box33 {
    flex: 1;
}

Answer 11

Answer №6

Utilize the flexbox property to control layout.

See an example here

.container {
  display: flex;
}

.container div {
  border: 1px solid blue;
  padding: 20px;
}

Answer 12

Utilize the flexbox property to control layout.

See an example here

.container {
  display: flex;
}

.container div {
  border: 1px solid blue;
  padding: 20px;
}

Is it possible to have 3 divs with the height of the tallest

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Creating an input field within a basic jQuery dialog box is not possible

Creating an unsorted list from information in a database table: A step-by-step guide

Convert string query into an array in PHP containing keys and values

Tips for styling your Angular Material Card on mobile devices

generate a customized synopsis for users without storing any data in the database

Automatically populate the options of a dropdown menu using jQuery

Loading images in advance using JavaScript

What is the significance of vendor prefixes in the world of CSS3?

"Challenges Arising in Deciphering a Basic JSON Array

Code to execute function depending on the width of a div

The Double Trigger of Ajax Notifications

Tips for showing text beyond the confines of a <div></div> container

Is there a way to use jQuery to eliminate divs that contain multiple identical data values?

Displaying search results seamlessly on the same page without any need for reloading

jQuery import children into output

Utilize Selenium in Python to choose an element

using JavaScript to strip away content following .jpg

What is the best way to use ajax to send a specific input value to a database from a pool of multiple input values

Place centered items within a flexbox that uses space-between alignment

Unexpected Results from WordPress Ajax Request