Image height not working on php loop - php

Question

Here's the div that manages the look of each item in the loop:
<div style="float:left;width:30%;padding:30px;height:auto;">
<img src="<?php echo $r['image']['sizes']['team']; ?>" style="max-width:750px !important;width:100%;">
<h3>
<?php echo $r['name']; ?>
</h3>
<div class="position">
<?php echo $r['position']; ?>
</div>
<?php echo $r['intro_text']; ?>
<?php if ($r['learn_more_text']) { ?>
Learn More
<?php } ?>
<?php if ($r['learn_more_text']) { ?>
<div id="<?php echo sanitize_title($r['name']); ?>" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h3><?php echo $r['name']; ?></h3>
<div class="position">
<?php echo $r['position']; ?>
</div>
<div class="content">
<?php echo $r['learn_more_text']; ?>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
</div>
If I set the height to a fixed number (eg: 450x), the images are aligned in a row. But that will make the page non mobile responsive. If I set the height to auto or to a percentage like 30%, the images become mobile responsive but they don't align. I get 2 images that separate into different rows.
Also, I got 2 sections of image. One is called Our Leadership and the other is called Our Team. The section at the bottom is aligned correctly and is contained in a div. The div above it refuses to be contained in a div. If I wrap it in a div, Only the first item wraps itself in the div. I've no idea why.
eg:
<center>
<div>
<div>first item here</div>
</div>
<div>second item here</div>
<div>third item here</div>
<div>fourth item here</div>
Here's the complete code for both sections:
<center><h2>Our Leadership</h2></center>
<center><div>
<?php
$people = get_field('people');
$a = 0;
foreach ($people as $r) {
$a++;
?>
<div style="float:left;width:30%;padding:30px;height:auto;">
<img src="<?php echo $r['image']['sizes']['team']; ?>" style="max-width:750px !important;width:100%;">
<h3>
<?php echo $r['name']; ?>
</h3>
<div class="position">
<?php echo $r['position']; ?>
</div>
<?php echo $r['intro_text']; ?>
<?php if ($r['learn_more_text']) { ?>
Learn More
<?php } ?>
<?php if ($r['learn_more_text']) { ?>
<div id="<?php echo sanitize_title($r['name']); ?>" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h3><?php echo $r['name']; ?></h3>
<div class="position">
<?php echo $r['position']; ?>
</div>
<div class="content">
<?php echo $r['learn_more_text']; ?>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
</div>
<?php } ?>
</div>
<?php } ?>
</div></center>
<div style="clear:both;"></div>
<center><h2>Our Team</h2></center>
<center><div>
<?php
$people2 = get_field('people_bottomsection');
$a = 0;
foreach ($people2 as $r) {
$a++;
?>
<div style="float:left;width:30%;padding:30px;height:auto;">
<img src="<?php echo $r['image']['sizes']['team']; ?>" style="max-width:750px !important;width:100%;">
<h3>
<?php echo $r['name']; ?>
</h3>
<div class="position">
<?php echo $r['position']; ?>
</div>
<?php echo $r['intro_text']; ?>
<?php if ($r['learn_more_text']) { ?>
Learn More
<?php } ?>
<?php if ($r['learn_more_text']) { ?>
<div id="<?php echo sanitize_title($r['name']); ?>" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h3><?php echo $r['name']; ?></h3>
<div class="position">
<?php echo $r['position']; ?>
</div>
<div class="content">
<?php echo $r['learn_more_text']; ?>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
</div>
<?php } ?>
</div>
<?php } ?>
</div></center>
<div style="clear:both;"></div>
Check out the source code at: http://www.equitasmg.com/who-we-are-2/

Answer 1

it's because the items in the loop are having different height. So, try adding a constant height to each item in the loop.
Eg:
<div style="float:left;width:30%;padding:30px;min-height:550px;"></div>