Equal Height Columns With Css

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>

Equal height columns - CSS

Use flex-wrap: wrap; with display: flex; on .outer and give width on .inner

.outer {
    display: flex;
    flex-wrap: wrap;
}

.inner {
    background: #fff;
    border: 1px solid #000;
    padding: 10px;
    margin-bottom: 20px;
    width:20%;
    text-align: left;
    box-sizing: border-box;
}

https://jsfiddle.net/k7oLbqj1/6/

Equal height columns with CSS

Here is a sample using ul/li elements, 2 columns using percentage and have equal height.

As tables prefer table/row/cell layout, I restructured your html a little.

* {    margin: 0;}html, body {    height: 100%;}.table {  display: table;  width: 90%;  height: 60%;  padding-top: 5%;  margin: 0 auto;}ul {  display: table-row;  list-style: none;  margin: 0;}
li {  display: table-cell;  width: 50%;  border: 1px solid #999;}

<div class="table">  <ul>    <li>1</li>    <li>2</li>  </ul>  <ul>    <li>3</li>    <li>4</li>  </ul>  <ul>    <li>5</li>    <li>6</li>  </ul></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;
}

Equal height columns in css except one column

You can make the top ribbon to be absolute position and rely on flexbox for the remaining to have equal height:

* { box-sizing:border-box;}
body {  background-color: #a3d5d3;}.container {  display: flex;}
.some {  margin-top:50px;  margin-right: 30px;  position:relative;}
.recommended {  position:absolute;  background-color: yellow;  left:0px;  right:0px;  height: 40px;  top:-40px;  padding: 5px 10px;}
.one {  background-color: transparent;}
.box {  width: 200px;  height:100%;  background-color: green;  padding: 10px;}

<div class="container">
  <div class="some">    <div class="recommended one"></div>    <div class="box">      foo<br> bar      <br> foo bar      <br> foo  bar      <br>    </div>  </div>
  <div class="some">    <div class="recommended">Recommended Card</div>    <div class="box">      foo<br>    </div>  </div>
  <div class="some">    <div class="recommended one"></div>    <div class="box">      foo<br> bar    </div>  </div>
</div>

Equal Height Columns With Css

CSS - Equal Height Columns?

Grid

Equal height columns - CSS

Equal height columns with CSS

How can I make Bootstrap columns all the same height?

LATEST SOLUTION (2022)

Equal height columns in css except one column

Related Topics

Leave a reply