How to keep all divs in a row the same height

Question

I'm working on a page that uses Bootstrap and have used this to define columns on this Codepen pen: https://codepen.io/smifaye/pen/GmeQrV

However one thing I can't seem to figure out is how to keep the height of the boxes uniform. I've set a min-height value for these boxes but my mind has gone blank as to how to make all divs resize at once.

.recycling {
  background-color: white;
  border: 1px solid #CCCCCC;
  padding: 0;
  min-height: 250px;
}

Also I'd like the buttons to stay at the bottom of the div but can't figure this out either :(

Any help would be massively appreciated.

(The menu area on the right is part of the design of the website and can't be changed)

set `min-height` and `max-height` both for these divs – Mohit Bhardwaj May 25 '17 at 10:46 — Mohit Bhardwaj, May 25 '17 at 10:46

score 3 · Answer 1 · answered May 25 '17 at 10:49

Used Flexbox you can set equal height in div

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
.recycling {
  background-color: white;
  border: 1px solid #CCCCCC;
  padding: 0;
  //min-height: 250px;
  height: 100%;
}

.button {
  min-height: 36px;
  height: auto;
  width: auto;
  padding: 0 36px 0 36px;
  border: 2px solid #00019F;
  font-size: 1em;
  color: #FFFFFF;
  background-color: #00019F;
  border-radius: 5px;
  text-decoration: none;
}

.button:hover {
  background-color: #2D389C;
  cursor: pointer;
}

.button:focus {
  border: 2px solid #FF9900;
  outline: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row " style="margin: 0px;">   
  
  <div class="col-md-4">
    Menu area that can't be removed
  </div>
  
  <div class="col-md-8">
  <div class="row row-eq-height">
    <div class="col-sm-6 col-md-4"> 
      <div class="recycling"> 
        <h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Your property</h3> 
        <p style="padding: 10px 10px 0px;"><strong>Find</strong> your collection days</p> 
        <p style="padding: 0px 10px;"><strong>Report</strong> a missed collection</p> 
        <p style="padding: 0px 10px;"><strong>Order</strong> a new recycling bin, box or bag</p> 
        <div style="padding: 0px 10px 10px; text-align: center;"> 
          <form action="https://environmentservices.camden.gov.uk/property"> <button class="button">Find, report, order</button> </form> 
        </div> 
      </div> 
    </div> 
    <div class="col-sm-6 col-md-4"> 
      <div class=" recycling"> 
        <h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Cleansing issues</h3> 
        <p style="padding: 10px 10px 0px;"><strong>Report</strong></p> 
        <ul> 
          <li>Dumped rubbish</li> 
          <li>Dog fouling</li> 
          <li>Graffiti</li> 
          <li>Other</li> 
        </ul> 
        <div style="padding: 0px 10px 10px; text-align: center;"> 
          <form action="https://environmentservices.camden.gov.uk/street"> <button class="button">Report</button> </form> 
        </div> 
      </div> 
    </div> 
    <div class="col-sm-6 col-md-4"> 
      <div class="recycling"> 
        <h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Additional information</h3> 
        <ul style="padding-top: 10px;"> 
          <li>Frequently asked questions</li> 
          <li>Communal collections</li> 
          <li>Large household item collections</li> 
          <li>More</li> 
        </ul> 
        <div style="padding: 0px 10px 10px; text-align: center;"> 
          <form action="http://www.camden.gov.uk/ccm/content/environment/waste-and-recycling/recycling-rubbish-and-reuse/"> <button class="button">View</button> </form> 
        </div> 
      </div> 
    </div> </div>
  </div>

score 1 · Answer 2 · answered May 25 '17 at 11:06

you can use display:flex on col-md-8 to equal the heights of the col-md-4 then add height:100% to recycling plus some padding-bottom to make 'room' for the buttons

then add position:absolute and position the form at the bottom of every recycling box

P.S. your HTML is a mess. inline styles, col-12 inside col-8 . columns inside columns without any rows that's not correct . see here > http://getbootstrap.com/examples/grid/ . columns should be nested inside ROW's and then inside other columns eg

   <div class="col-md-8">
      .col-md-8
      <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
      </div>
    </div>

for your solution see snippet below or jsFiddle

.col-md-8 {
  display: flex;
}

.recycling {
  background-color: white;
  border: 1px solid #CCCCCC;
  padding: 0 0 60px;
  height: 100%;
  position: relative;
}

.button {
  min-height: 36px;
  height: auto;
  width: auto;
  padding: 0 36px 0 36px;
  border: 2px solid #00019F;
  font-size: 1em;
  color: #FFFFFF;
  background-color: #00019F;
  border-radius: 5px;
  text-decoration: none;
}

.button:hover {
  background-color: #2D389C;
  cursor: pointer;
}

form {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 15px;
  text-align: center;
}

.button:focus {
  border: 2px solid #FF9900;
  outline: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row" style="margin: 0px;">

  <div class="col-md-4">
    Menu area that can't be removed
  </div>

  <div class="col-md-8">

    <div class="col-sm-6 col-md-4">
      <div class="col-md-12 recycling">
        <h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Your property</h3>
        <p style="padding: 10px 10px 0px;"><strong>Find</strong> your collection days</p>
        <p style="padding: 0px 10px;"><strong>Report</strong> a missed collection</p>
        <p style="padding: 0px 10px;"><strong>Order</strong> a new recycling bin, box or bag</p>
        <div style="padding: 0px 10px 10px; text-align: center;">
          <form action="https://environmentservices.camden.gov.uk/property">
            <button class="button">Find, report, order</button>
          </form>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4">
      <div class="col-md-12 recycling">
        <h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Cleansing issues</h3>
        <p style="padding: 10px 10px 0px;"><strong>Report</strong></p>
        <ul>
          <li>Dumped rubbish</li>
          <li>Dog fouling</li>
          <li>Graffiti</li>
          <li>Other</li>
        </ul>
        <div style="padding: 0px 10px 10px; text-align: center;">
          <form action="https://environmentservices.camden.gov.uk/street">
            <button class="button">Report</button>
          </form>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4">
      <div class="col-md-12 recycling">
        <h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Additional information</h3>
        <ul style="padding-top: 10px;">
          <li>Frequently asked questions</li>
          <li>Communal collections</li>
          <li>Large household item collections</li>
          <li>More</li>
        </ul>
        <div style="padding: 0px 10px 10px; text-align: center;">
          <form action="http://www.camden.gov.uk/ccm/content/environment/waste-and-recycling/recycling-rubbish-and-reuse/">
            <button class="button">View</button>
          </form>
        </div>
      </div>
    </div>
  </div>

Ha. When I run the snippet or open the jsFiddle they are all different. :S — smifaye, May 25 '17 at 13:07
all boxes with class `.recycling` ? or what do you mean ? they are all the same . all 3. ( .col-md-12.recycling ) . the ones you asked for to be same height — Mihai T, May 25 '17 at 13:09
Yeah all boxes with class .recycling are different. I've updated my Code pen and they are all different heights. I'm sure I'm missing something obvious! :( — smifaye, May 25 '17 at 13:17
in your codepen https://codepen.io/smifaye/pen/GmeQrV . all are equal in height . see here > https://jsfiddle.net/Mihai_T/DTcHh/33008/ i changed the border to 10px red. they are all equal in height ( not width ). and what browser are you using ? — Mihai T, May 25 '17 at 13:20
Ah right. I see, I'm stuck with a really old version of Chrome here, version 45.0.2454.101 m! — smifaye, May 25 '17 at 13:26
hmm strange. try adding also `display:-webkit-flex` might do the trick . — Mihai T, May 25 '17 at 14:10

score 0 · Answer 3 · edited May 25 '17 at 12:54

If you do not want:

Javascript
CSS3

Then you can use this:

.table {
  display: table;
  width: 100%;
  border-spacing: 10px 0;
}

.cell {
  position: relative;
  display: table-cell;
  border: 1px solid #f00;
  padding: 15px 15px 40px;
}

button {
  position: absolute;
  bottom: 15px;
  right: 15px;
}

<div class="table">
  <div class="cell">
    <div class="inner">
      <strong>Title</strong>
      <p>Some text.</p>
      <button>Button</button>
    </div>
  </div>

  <div class="cell">
    <div class="inner">
      <strong>Title</strong>
      <p>Some text.</p>
      <button>Button</button>
    </div>
  </div>

  <div class="cell">
    <div class="inner">
      <strong>Title</strong>
      <p>Some text.</p>
      <p>Some text.</p>
      <p>Some text.</p>
      <button>Button</button>
    </div>
  </div>
</div>

Of course, you can target the table and cell class with media queries to disable it for phones for example.

score -1 · Answer 4 · answered May 25 '17 at 10:48

-1

If you cannot use JS/jQuery, then you should set both min-height and max-height for these div's.

e.g.

.recycling {
  background-color: white;
  border: 1px solid #CCCCCC;
  padding: 0;
  min-height: 250px;
  max-height: 250px;
}

answered May 25 '17 at 10:48

Mohit Bhardwaj

9,650
3
37
64

How to keep all divs in a row the same height

4 Answers4