How to keep all divs in a row the same height [duplicate] - html

Question

This question already has answers here:
How can I make Bootstrap columns all the same height?
(34 answers)
Closed 5 years ago.
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)

Answer 1

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>

Answer 2

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>

Answer 3

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.

Answer 4

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;
}