Nested Divs displaying at different heights

Question

I am working on a web page that pulls different food items from a PHP database. There is a div element that is the parent of multiple divs that hold the retrieved values. For some reason, they are displaying very strangely. I will attach a photo and the HTML, PHP, and CSS code that I am using.

HTML:

<main>
    <div id="items">
        <?php getTheFoodItems(); ?>
    </div>
</main>

PHP:

<?php foreach($food_items as $item) : ?>
// Inserts a line break for every 4 items
<?php if (($i % 4) == 0 ) {
    echo "<br/>";
} ?>

<div class="food-item">
<h4> <?php echo $item['name']; ?> - <?php echo $item['price']; ?> </h4>
<p> <?php echo $item['description'];?> </p>
</div>

<?php $i++; ?>

<?php endforeach;?>

CSS:

main {
    margin-top: 50px;
    margin-bottom: 50px;
}

#items {
    margin: 10px 100px 10px 100px;
    text-align: center;
}

.food-item {
    border: 2px solid;
    border-radius: 5px;
    width: 200px;
    height: 200px;
    padding-left: 20px;
    padding-right: 20px;
    /*margin: auto;*/
    margin: 20px 20px 20px 20px;
    transition: 0.4s;
    display: inline-block;
    text-align: left;
}

I am a beginner when it comes to web development. Let me know what you think. Any help is much appreciated!

Additional HTML:

<main>
    <div id="items">
            
            
        <br/>
        <div class="food-item">
        <h4> Fries - 2.49 </h4>
        <p> Crispy fresh-cut fries with a side of ketchup. </p>
        </div>

        
            
        
        <div class="food-item">
        <h4> Hot Dog - 3.49 </h4>
        <p> Classic American hot dog with mustard, ketchup, and relish on a toasted bun. </p>
        </div>

        
            
        
        <div class="food-item">
        <h4> Hamburger - 3.99 </h4>
        <p> A juicy hamburger patty grilled and served on a fresh bun with mustard and ketchup. </p>
        </div>

        
            
        
        <div class="food-item">
        <h4> Buffalo Chicken Wrap - 3.99 </h4>
        <p> Crispy buffalo chicken wrapped in a flour tortilla with lettuce and ranch dressing. </p>
        </div>

        
            
        <br/>
        <div class="food-item">
        <h4> Caesar Salad - 3.49 </h4>
        <p> Fresh romaine lettuce served with Caesar salad dressing, croutons, and parmesean cheese. </p>
        </div>

        
            
        
        <div class="food-item">
        <h4> Mac and Cheese - 2.49 </h4>
        <p> A sharp three cheese blend served over macaroni and topped with bread crumbs. </p>
        </div>

        
    
        </div>
</main>

Could you attach the final HTML displayed in your browser? That would be quite helpful in determining if this is an HTML or CSS situation. :) — Alec, Aug 26 '20 at 19:24
Wrap the divs with another div outside the foreach loop at 100% width and 200px height. — SJacks, Aug 26 '20 at 19:24
I missed that you already have a div called #items containing the food items. Set this this div to position:relative; float:left; width:100%; height:200px; and remove the margin top and botton on the .food-item and that should do it. EDITED — SJacks, Aug 26 '20 at 19:42
@GovernorDynamic in case you're curious, if you take your original example, and add `vertical-align: bottom;` to the `.food-item` class, it's the only change necessary to get it to work. — Dan Mullin, Aug 26 '20 at 20:25

score -1 · Accepted Answer · answered Aug 26 '20 at 19:38

You can simply use flex-box where you will apply it on the parent div and you elements will look responsive just the following snippet

Example

main {
  margin-top: 50px;
  margin-bottom: 50px;
}

#items {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

.food-item {
  border: 2px solid;
  border-radius: 5px;
  width: 150px;
  height: 150px;
  margin: 5px;
  padding-left: 20px;
  padding-right: 20px;
  /*margin: auto;*/
  transition: 0.4s;
  display: inline-block;
  text-align: left;
}

<main>
  <div id="items">
    <br/>
    <div class="food-item">
      <h4> Fries - 2.49 </h4>
      <p> Crispy fresh-cut fries with a side of ketchup. </p>
    </div>
    <div class="food-item">
      <h4> Hot Dog - 3.49 </h4>
      <p> Classic American hot dog with mustard, ketchup, and relish on a toasted bun. </p>
    </div>
    <div class="food-item">
      <h4> Hamburger - 3.99 </h4>
      <p> A juicy hamburger patty grilled and served on a fresh bun with mustard and ketchup. </p>
    </div>
    <div class="food-item">
      <h4> Buffalo Chicken Wrap - 3.99 </h4>
      <p> Crispy buffalo chicken wrapped in a flour tortilla with lettuce and ranch dressing. </p>
    </div>
    <br/>
    <div class="food-item">
      <h4> Caesar Salad - 3.49 </h4>
      <p> Fresh romaine lettuce served with Caesar salad dressing, croutons, and parmesean cheese. </p>
    </div>
    <div class="food-item">
      <h4> Mac and Cheese - 2.49 </h4>
      <p> A sharp three cheese blend served over macaroni and topped with bread crumbs. </p>
    </div>
  </div>
</main>

Nested Divs displaying at different heights

1 Answers1

Example