Row of boxes. Height is RESPONSIVE. How to make all equal height, or align the tops?

HTML & CSS
1

In the center of this page: http://easydigging.com/Garden_Tool/home2.html you will see a collection of bordered boxes that display our different product categories.

The page is responsive, so the boxes narrow and the height changes continously to fit the text as you alter your screen width. There are 4 boxes per row on desktop displays, 3 boxes per row on tablets, 2 boxes per row on large phones, and 1 box per row for small phones.
*You can pull the side of your display from wide to narrow to see the effect in real-time.

The problem is that they look weird at certain screen widths - since the bottom edges are aligned and the box height varies a little to fit the text at different screen widths. So at some screen widths all the boxes are the same height and they look nice (like a row of playing cards), but at other screen widths they are not all the same height and the top edge looks jagged (like a city skyline or a mountain range)

My first choice would be for all the boxes to be the same height as the TALLEST box (so they look like deck of equal sized cards - but remember that the height varies as the screen width changes)

My second choice would be for the TOP EDGE to align instead of the bottom (the bottom edge would be jagged, but that is OK)

I can’t figure out how to do either of these :blush: If you have ideas, please share them…:slight_smile:

2

Like this: :slight_smile:


.home-box {
    display: inline-block;
    width: 30%;
  [B]  vertical-align: top;
[/B]}
3

The first choice isn’t really feasible because the way to make the boxes equal height is to to use the display:table and display:table-cell properties but that would stop them wrapping as tables must stay in rows with the same number of cells.

Someone asked a similar question and I came up with this but it’s only working in Firefox at the moment but isn’t a feasible layout. It uses display:table-cell for the equal height but uses media queries to change the column numbers as the width decreases using empty elements inserted into the html. It’s a clever trick but of no real use I’m afraid.

If you don’t want the wrapping behaviour then just use display:table/cell but you will need to set the items in equal rows.

You could probably do it with some jquery if it’s important.

4

Thanks Paul :smiley:

I knew there had to be some type of command like that, but just couldn’t find it.

Your vertical-align:top; suggestion, plus a little editing of the text so neighboring boxes stay reasonably height consistent, has cured the problem. The page has been updated to see the results.

5

I am sorry, I haven’t noticed this post earlier. If you haven’t solved problem with equal heights, this quick fix could help:
-Make two div’s with id=tranparent and id+nontransparent (or Mike and Jim). Following code is for transparent and nontransparent:
<script type=“text/javascript”>
onload=function() {
var leftheight = document.getElementById(‘nontransparent’).offsetHeight;
var rightheight = document.getElementById(‘transparent’).offsetHeight;
document.getElementById(‘transparent’).style.height =leftheight + “px”;
document.getElementById(‘transparent’).style.top = leftheight - rightheight + “px”; }
</script>
-This code will work, i did some research for my blog about “automatically stretching sidebar”, and after lot of solutions that doesn’t worked, so far this is best.
Warning: if you resize your browser, result will not show until you reload page (onload=function()…). But I haven’t seen many client’s who will play with resizing.
Use positioning or float to adjust left or right.
I hope this helps a little.