Why do my div move down when I add an image

Question

When ever I add an image to my main-menu-item-container divs, the div moves down relative to the rest of the items (please see snippet). I am trying to create mobile layout with a grid structure, which varies the number of items per row based on the screen width. This seems to be working okay, except for the divs dropping.

body {
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: red;
}

.main-menu-container-outer {
  padding: 0;
  margin: 0;
  text-align: center;
  background-color: green;
}

.main-menu-container-inner {
  padding: 0;
  margin: 0;
  text-align: left;
  background-color: yellow;
}

.main-menu-item-container {
  display: inline-block;
  background-color: #0070a3;
  text-align: center;
  padding: 0;
  border-radius: 7px;
  width: 104px;
  height: 116px;
  margin: 6px;
  font-family: "Arial";
  font-size: 14px;
}

.main-menu-item-icon {
  width: 64px;
  height: 64px;
  margin: 10px 0 4px 0px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>

<body>

  <div class="main-menu-container-inner">

    <div id="1" class="main-menu-item-container">

    </div>

    <div id="menu-item-news" class="main-menu-item-container">
      <img class="main-menu-item-icon" src="media/menu/icon-news.png"><br> News Feed
    </div>

    <div id="3" class="main-menu-item-container">

    </div>
    <div id="4" class="main-menu-item-container">

    </div>
    <div id="5" class="main-menu-item-container">

    </div>



    <div id="6" class="main-menu-item-container">

    </div>
    <div id="7" class="main-menu-item-container">

    </div>
    <div id="8" class="main-menu-item-container">

    </div>
    <div id="9" class="main-menu-item-container">

    </div>
    <div id="10" class="main-menu-item-container">

    </div>
    <div id="11" class="main-menu-item-container">

    </div>
    <div id="12" class="main-menu-item-container">

    </div>
    <div id="13" class="main-menu-item-container">

    </div>
    <div id="14" class="main-menu-item-container">

    </div>
    <div id="15" class="main-menu-item-container">

    </div>
    <div id="16" class="main-menu-item-container">

    </div>
    <div id="17" class="main-menu-item-container">

    </div>
    <div id="18" class="main-menu-item-container">

    </div>
    <div id="19" class="main-menu-item-container">

    </div>
    <div id="20" class="main-menu-item-container">

    </div>

    <div id="vehicles" class="main-menu-item-container">
      <img class="main-menu-item-icon" src="media/menu/icon-vehicle.png">
    </div>

    <div id="21" class="main-menu-item-container">

    </div>

  </div>

</body>

</html>

Thanks Stickers, my terminology was wrong as I did not see this in my searches. :) — Graham, Feb 08 '18 at 16:14
Add tags around the "News Feed" and add this CSS .main-menu-item-container *{ position:absolute; } — Rijin Mk, Feb 08 '18 at 16:18

Why do my div move down when I add an image

0 Answers0