Making rows nested in cells the same height as rows in other cells

[csdude55]

If I were doing this in a table, it would look like:

<?php

$arr = array(
 'Text',
 'More Text',
 'Even More<br>Text',
 (20 or so more)...
);

echo <<<EOF
<table>
 <tr valign="center">
  <td>$arr[0]</td>
  <td>$arr[1]</td>
  <td>$arr[2]</td>
  ...
 </tr>

 <tr>
  <td><img src="foo.jpg"></td>
  <td><img src="bar.jpg"></td>
  <td><img src="meh.jpg"></td>
  ...
 </tr>
</table>

EOF;
?>

The key here is that I don't know whether the text is going to wrap, so I don't know the height beforehand. The text could potentially have 3 or 4 breaks in it, making it relatively tall as compared to those with no breaks.

I'm using HTML5 now, and I'm trying to figure out a nice way to make the height of the text all match up nicely, mainly so that the images are all in line. Right now my code looks like:

<div>
 <div style="float: left; width: 100px; text-align: center">
  <p>
$arr[0]
  </p>

  <div>
   <img src="foo.jpg">
  </div>
 </div>

 <div style="float: left; width: 100px; text-align: center">
  <p>
$arr[1]
  </p>

  <div>
   <img src="bar.jpg">
  </div>
 </div>

 <div style="float: left; width: 100px; text-align: center">
  <p>
$arr[2]
  </p>

  <div>
   <img src="meh.jpg">
  </div>
 </div>
</div>

You can see that I have the cells wrap around, so I can't really use a table now. But other than defining a height in advance, how can I get all of the <p> tags to have the same height?

[not2easy]

If they weren't floated they could be aligned within a container set to "display:table-row;" but if these <p>'s need to wrap that doesn't work by itself. For similar situations I assign the "display:table-row;" to widths that should never need to wrap and use @media queries to change the container class to "display:block;" at mobile widths.

The <div> elements that you are floating, I set to "display:table-cell;" so the paragraphs within all have the same height when aligned in a row and use @media queries to change the <div> class to "display:block;" at mobile widths.

Something like:

<div class="row">

<div class="cell">
<p>$arr[0]</p>
<div>
<img src="IMAGE" alt="ALT">
</div>
</div>

<div class="cell">
<p>$arr[1]</p>
<div>
<img src="IMAGE" alt="ALT">
</div>
</div>

<div class="cell">
<p>$arr[2]</p>
</div>

</div>

I hope this doesn't make it more confusing. The "cell" class works like table cells until the smaller widths' media queries turn them to full width blocks.

[topr8]

i've been using flexbox recently ... it is incredibly versatile and great for all kinds of layout alignmet issues ... you can also nest flexbox in another flexbox and so on ... once you get your head around it, there is no going back. i think it will resolve your issue with a little thought.

[csdude55]

I've only recently begun to play with flex. I still have a lot of older browsers on my site so I've been hesitant, and realized that if I'm setting up flexbox with a fallback to floats or something... then why not just use the floats?

I spent all day yesterday trying to use flex to make this work, but either it's not going to do what I'm hoping or I'm not quite wrapping my head around it. This is what I've been using as a guide:

[w3schools.com...]

In theory, I think it could work if I set a row for the text and give it a fixed width, then set another row for the images with the same fixed width? But since I'm building this in PHP, that would mean a loop to create the text row, then another loop to create the image row, etc. Since the actual script has 6 rows, I'm not in love with looping through the same array so many times.

I stumbled across a jQuery option that seems to work, but it changes the height after it's all loaded so there's an awkward screen twitch that I don't love. But it might work out for future readers. Obviously I wouldn't load jQuery JUST for this, but I'm already loading it for infinite scroll so there's no additional stress to use it here:

<div>
 <div style="float: left; width: 100px; text-align: center">
 <p>
  $arr[0]
 </p>

 <div>
  <img src="foo.jpg">
 </div>
 </div>

 <div style="float: left; width: 100px; text-align: center">
 <p>
  $arr[1]
 </p>

 <div>
  <img src="bar.jpg">
 </div>
 </div>

 <div style="float: left; width: 100px; text-align: center">
 <p>
  $arr[2]
 </p>

 <div>
  <img src="meh.jpg">
 </div>
 </div>
</div>

<script>
var maxHeight = 0;

$('p').each(function() {
if ($(this).height() > maxHeight)
maxHeight = $(this).height();
});

$('p').height(maxHeight);
</script>

[topr8]

the best intro to flex is [css-tricks.com...] ... i haven't tried your example, however, i've used it a lot and i think it would work for you ... it's worth cracking the flexbox system (even if not for your current issue - it is now widely supported)! it's totally changed the way i do everything!