Set height for div columns

HTML & CSS
6

Here is the basics of what you need to do using some of your html.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
.wrap {
	margin:0 auto;
	max-width:940px;
	display:flex;
	flex-wrap:wrap;
	box-sizing: border-box;
	justify-content:space-between;
}
.box {
	margin:10px 10px 10px 0;
	display:inline-block;/* fallback */
	width:300px;/* fallback*/
	vertical-align:top;/* fallback*/
	display:flex;
	flex-direction:column;
	flex:1 0 300px;
	box-sizing: border-box;
}
.box h3 {
	overflow:hidden;
	margin:0 0 34px;
	padding-top: 48px;
}
.box h3 a {
	float:left;
	margin:0 10px 10px 0
}
.box h3 span{display:block}
.box p{margin:0 0 20px}
 .btn {
	margin-top:auto;
}
</style>
</head>

<body>
<div class="wrap">
  <div class="box">
    <h3><a href="/PDFs/wp/Extended_ERP.pdf"><img src="http://www.radley.com/images/100/WP_extendedERP.jpg" alt="warehouse" class="icon"></a> WMS vs ERP<span>WMS for Manufacturers</span></h3>
    <p><i>Should you implement WMS with your existing ERP, or invest in a stand-alone WMS system? Here we explore which option has clear advantages.</i></p>
    <div class="btn"><a href="/PDFs/wp/Extended_ERP.pdf" title="Taking the bite out of QAD implementations" target="_blank" class="btn">Read Now</a></div>
  </div>
  <!-- end box -->
  
  <div class="box">
    <h3><a href="/PDFs/wp/wp_Traceability_SourcingTheData.pdf"><img src="http://www.radley.com/images/100/TraceabilitySourcingTheData100.jpg" alt="traceability" class="icon"></a> Traceability<span>Sourcing the Data</span></h3>
    <div class="clear"></div>
    <p><i>Companies across multiple industries are being challenged by the need to track and trace products they produce or materials they handle. Learn how to determine your options for collecting traceability data. </i></p>
    <div class="btn"><a href="/PDFs/wp/wp_Traceability_SourcingTheData.pdf" title="Taking the bite out of QAD implementations" target="_blank" class="btn">Read Now</a></div>
  </div>
  <!-- end box -->
  <div class="box">
    <h3><a href="/PDFs/wp/Extended_ERP.pdf"><img src="http://www.radley.com/images/100/WP_extendedERP.jpg" alt="warehouse" class="icon"></a> WMS vs ERP<span>WMS for Manufacturers</span></h3>
    <p><i>Should you implement WMS with your existing ERP, or invest in a stand-alone WMS system? Here we explore which option has clear advantages.</i></p>
    <div class="btn"><a href="/PDFs/wp/Extended_ERP.pdf" title="Taking the bite out of QAD implementations" target="_blank" class="btn">Read Now</a></div>
  </div>
  <!-- end box -->
  
  <div class="box">
    <h3><a href="/PDFs/wp/wp_Traceability_SourcingTheData.pdf"><img src="http://www.radley.com/images/100/TraceabilitySourcingTheData100.jpg" alt="traceability" class="icon"></a> Traceability<span>Sourcing the Data</span></h3>
    <div class="clear"></div>
    <p><i>Companies across multiple industries are being challenged by the need to track and trace products they produce or materials they handle. Learn how to determine your options for collecting traceability data. </i></p>
    <div class="btn"><a href="/PDFs/wp/wp_Traceability_SourcingTheData.pdf" title="Taking the bite out of QAD implementations" target="_blank" class="btn">Read Now</a></div>
  </div>
  <!-- end box -->
  <div class="box">
    <h3><a href="/PDFs/wp/Extended_ERP.pdf"><img src="http://www.radley.com/images/100/WP_extendedERP.jpg" alt="warehouse" class="icon"></a> WMS vs ERP<span>WMS for Manufacturers</span></h3>
    <p><i>Should you implement WMS with your existing ERP, or invest in a stand-alone WMS system? Here we explore which option has clear advantages.</i></p>
    <div class="btn"><a href="/PDFs/wp/Extended_ERP.pdf" title="Taking the bite out of QAD implementations" target="_blank" class="btn">Read Now</a></div>
  </div>
  <!-- end box -->
  
  <div class="box">
    <h3><a href="/PDFs/wp/wp_Traceability_SourcingTheData.pdf"><img src="http://www.radley.com/images/100/TraceabilitySourcingTheData100.jpg" alt="traceability" class="icon"></a> Traceability<span>Sourcing the Data</span></h3>
    <div class="clear"></div>
    <p><i>Companies across multiple industries are being challenged by the need to track and trace products they produce or materials they handle. Learn how to determine your options for collecting traceability data. </i></p>
    <div class="btn"><a href="/PDFs/wp/wp_Traceability_SourcingTheData.pdf" title="Taking the bite out of QAD implementations" target="_blank" class="btn">Read Now</a></div>
  </div>
  <!-- end box --> 
  
</div>
</body>
</html>

If you copy that code and run it in your browser you can play around with it and see how it looks and how it works.

The .wrap class is set as display:flex and that will make its direct children flex items which will then stack horizontally. Each box is also set to display:flex but specified as a column so that we can align the btn to the bottom to of the equal height boxes (which flex does by default). The btn is simply pushed to the bottom by giving it a top auto margin.

A fallback for older browsers is used using inline-block and will look much the same as your original.

Flex is too complicated to grasp straight away so you will need to play around and test to get a feel for it.

2 Likes