Set height for div columns

How do I set a uniform height for the columns on this page??

http://www.radley.com/Learn/whitepapers.html

Flex box is great for this kind on thing. Here is a Codepen I did in response to another question here. All the boxes on each row are uniform height, but the height is not fixed for greater flexibility allowing a varying length of content.
You will see it is very responsive, without the need for any media queries and copes very well with zooming, either the whole page or just the font size.

2 Likes

Great. I’m not a web developer, so can you give me more details? What is Flex Box and how do I use it?

That’s a big question! It is relatively new and can be quite complex, but worth learning because it does amazing things for RWD.
This is a favourite guide that I use for reference which will tell you more than I have time to.
But if you have any more specific question about it, ask.

1 Like

Sorry. I’m going to need some specifics. What html or CSS do I need to add to the existing code to make the column height all the same?

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

I have added more comments to the codepen that should help explain what each flex property does.
I also tried editing your page in Inspect, but it will need a little change in markup to work.
This approach is a nested flex, first you need a common container for all the items. At first I though the <div class="row"> would do it, but it also contains the title, so you need another container for just the papers. That with what you should apply display:flex to affect all its children.
The next trick is to make the boxes the same height, they will be, but the last item, the link will sit below the last element before, so some may appear shorter. To fix that, the nested flex.
Make the boxes display:flex but this time as columns, the property justify-content: space-between will force the children to spread out to the full height of the box, forcing the link to the bottom. That may make too much space, so you may want to group the top few elements (h3 div ans i) into a common wrapper to hold them together at the top, while the link goes to the bottom.

1 Like

What should the container be? Just div or does it need a class?

A div will do it, unless you can think of something with better semantics. Yes, you will probably need a class so you can target it with a css selector.

It needs to be exactly as in my example and must wrap just the horizontal blocks as shown in my example (which is using mostly your code).

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.