Make Two Parallel '<Div>' Colums the Same Height

Make two parallel ` div ` colums the same height

This can be achieved in CSS3 with the new box model:

.box {
width:100px;
display:box;
/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;
/* W3C */
display:box;
box-orient:horizontal;
}

.box .column1 {
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
-ms-flex:1.0; /* Internet Explorer 10 */
box-flex:1.0;
background: yellow;
}

.box .column2 {
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
-ms-flex:1.0; /* Internet Explorer 10 */
box-flex:1.0;
background: green;
}

And the HTML

    <div class="box">
<div class="column1">
a<br>b
</div>
<div class="column2">
a
</div>
</div>

I made this with the examples from here http://www.w3schools.com

Fiddle http://jsfiddle.net/w5ELr/

How do I keep two side-by-side div elements the same height?

Flexbox

With flexbox it's a single declaration:

.row {
display: flex; /* equal height of the children */
}

.col {
flex: 1; /* additionally, equal width */

padding: 1em;
border: solid;
}
<div class="row">
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

CSS - Equal Height Columns?

Grid

Nowadays, I prefer grid because it allows keeping all layout declarations on parent and gives you equal width columns by default:

.row {

display: grid;

grid-auto-flow: column;

gap: 5%;

}

.col {

border: solid;

}
<div class="row">

<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>

<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div>

</div>

How can I make Bootstrap columns all the same height?

LATEST SOLUTION (2022)

Solution 4 using Bootstrap 4 or 5

Bootstrap 4 and 5 use Flexbox by default, so there is no need for extra CSS.

Demo

<div class="container">
<div class="row ">
<div class="col-md-4" style="background-color: red">
some content
</div>
<div class="col-md-4" style="background-color: yellow">
catz
<img width="100" height="100" src="https://placekitten.com/100/100/">
</div>
<div class="col-md-4" style="background-color: green">
some more content
</div>
</div>
</div>

Solution 1 using negative margins (doesn't break responsiveness)

Demo

.row{
overflow: hidden;
}

[class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}

Solution 2 using table

Demo

.row {
display: table;
}

[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}

Solution 3 using flex added August 2015. Comments posted before this don't apply to this solution.

Demo

.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}

Align child elements of different blocks

This is not possible at present (2019/06)* with any CSS layout method.

display:subgrid solves the issue but it has limited non-experimental adoption by browsers as yet.*

*[2019/12 Update] - Subgrid is now shipped in Firefox 71

Support @ CanIuse.com

--

It is enabled, by default, in Firefox 71+ so it is possible to test. Until this is fully adopted Javacript is needed to equalise element heights.

A couple of resources links from Rachel Andrew (a CSS-Grid envangalist)

  1. https://rachelandrew.co.uk/archives/2019/04/16/css-subgrid-news-and-demos/

and


  1. YouTube video on subgrid

  2. And Another

* {   margin: 0;   padding: 0;   box-sizing: border-box; }  ::before, ::after {   box-sizing:inherit; }

.Grid {

display: grid;

width:90%;

margin:auto;

grid-gap: 10px;

grid-template-columns: repeat( auto-fill, 280px);

}

.loon-card {

display:grid;

grid-row: span 5; /* as we have 5 card components in each card */

grid-template-rows:subgrid;

border: 1px solid #ddd;

padding: 10px;

}

.long-description {

border-top: 1px solid #ddd;

}

.price {

padding:.5em;

text-align:center;

}

img {

max-width:100%;

display: block;

}
<div class="Grid">

<div class="loon-card">

<img src="http://www.fillmurray.com/300/200">

<div class="short-description">

Title:1

<br/>Title:2

<br/>Title:3

<br/>Title:4

</div>

<div class="long-description">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.

</div>

<div class='price'>12.00$</div>

<button>buy</button>

</div>

<div class="loon-card">

<img src="http://www.fillmurray.com/300/200">

<div class="short-description">

Title:1

<br/>Title:2

<br/>Title:3

<br/>Title:4

<br/>Title:5

<br/>Title:6

</div>

<div class="long-description">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.

</div>

<div class='price'>12.00$</div>

<button>buy</button>

</div>

<div class="loon-card">

<img src="http://www.fillmurray.com/300/200">

<div class="short-description">

Title:1

<br/>Title:2

<br/>Title:3

<br/>Title:4

</div>

<div class="long-description">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.

</div>

<div class='price'>14.00$</div>

<button>buy</button>

</div>

<div class="loon-card">

<img src="http://www.fillmurray.com/300/200">

<div class="short-description">

Title:1

<br/>Title:2

<br/>Title:3

<br/>Title:4

</div>

<div class="long-description">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.

</div>

<div class='price'>15.00$</div>

<button>buy</button>

</div>

</div>


Related Topics



Leave a reply



Submit