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)
- https://rachelandrew.co.uk/archives/2019/04/16/css-subgrid-news-and-demos/
and
YouTube video on subgrid
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
Changing Variable Dynamically (At Runtime) via Less and CSS
Automatically Open <Details> Element on Id Call
Overflow-Y Scroll Not Working in Ie 11
Unwanted Spacing Below Images in Xhtml 1.0 Strict
How to Open Submenu on Hover of Main Menu
How to Change the Look of Resize Handles
Use Different @Keyframes Based on Parent Element Class
CSS Font Size Using Em Different on Different Pages
Equal Width Using Flex and Border-Box
Mix-Blend-Mode Not Working in Webkit-Browsers When Element Is Direct Child of Body
Make Two Parallel '<Div>' Colums the Same Height
Vertical Align Block Level Element Inside a Block Level Element
Aligning Two Flex Items: One to the Top, the Other Centered
Three Horizontal Stripes in CSS