html - Length of <p> element changing position of parent? -

i have set of 'product' divs inside wrapping containers. these product divs contain image, header , p text. reason, length of p text changing position of parent product div. here screenshot: https://gyazo.com/9504729541e6bee17a27e4121af3a1c9

the p , h2 elements both have 0 padding , margins. try keep code minimal possible.

html:

<div id="content" class="wrapper">     <div id="content-container">          <div id="product-container">                         <div class="product-wrapper">                             <div id="product" class="unhidden">                                 <div class="image-container">                                 <img src="assets/home-bg.jpg" class="thumbnail">                                 </div>                                     <div class="product-text">                                     <h2>mexican nachos - £6.99</h2>                                     <p>tortilla chips , melted cheese option of salsa, jalapenos, ground meat, guacamole , tomatoes.</p>                                 </div>                             </div>                              <div id="product" class="unhidden">                                 <div class="image-container">                                 <img src="assets/enchilada.jpg" class="thumbnail">                                 </div>                                     <div class="product-text">                                     <h2>enchiladas - £10.99</h2>                                     <p>tortilla chips , melted cheese option of salsa, jalapenos, ground meat, guacamole , tomatoes.</p>                                 </div>                             </div>                              <div id="product" class="unhidden">                                 <div class="image-container">                                 <img src="assets/quesadilla.jpg" class="thumbnail">                                 </div>                                     <div class="product-text">                                     <h2>quesadilla - £4.99</h2>                                     <p>shorter length test</p>                                 </div>                             </div>                              <div id="product" class="unhidden">                                 <div class="image-container">                                 <img src="assets/shrimp.jpg" class="thumbnail">                                 </div>                                     <div class="product-text">                                     <h2>shrimp stir fry - £10.99</h2>                                 </div>                             </div>                           </div>                     </div> <!-- product container -->                </div> <!-- content container -->             </div> <!-- content-wrapper container -->  

css:

#content {     height: 100%;     padding-top: 100px; }  .wrapper {     width: 65%;      margin: 0 auto; }  #content-container {     display: inline-block;     width: 100%;     height: 100%;     background-color: white;     box-shadow: -20px 0px 25px -20px #000000, 20px 0px 25px -20px #000000;     overflow: scroll; }  #product-container {     width: 100%;     height: 100%;     padding-top: 25px; }  .product-wrapper {     width: 80%;     height: 100%;     margin: 0px auto;     text-align: center; }  #product {     display: inline-block;     height: 352px;     width: 200px;     margin: 10px;     border: solid 2px black; }  .image-container {     height: 200px;     width: 200px; }  .product-text {     font-family: 'open sans condensed';     height: 150px;     width: 100%;     text-align: center;     color: black;     border-top: solid 2px black;     background: #ffffff; /* old browsers */     background: -moz-linear-gradient(top, #009641 0%, #a1d54f 96%, #80c217 100%, #7cbc0a 100%); /* ff3.6-15 */     background: -webkit-linear-gradient(top, #009641 0%,#a1d54f 96%,#80c217 100%,#7cbc0a 100%); /* chrome10-25,safari5.1-6 */     background: linear-gradient(to bottom, #009641 0%,#a1d54f 96%,#80c217 100%,#7cbc0a 100%); /* w3c, ie10+, ff16+, chrome26+, opera12+, safari7+ */ }  .product-text h2 {     font-size: 23px;     padding: 0;     margin: 0; }  .product-text p {     font-style: italic;     font-weight: 700;     padding: 0;     margin: 0; }  .thumbnail {     position: relative;     height: 200px;     width: 200px;     cursor: pointer;     z-index: 1200; } 

your #product elements display: inline-block. means take inline level characteristics, 1 of baseline alignment (i.e., vertical-align: baseline).

override default setting vertical-align: top.

(also, have multiple elements id="product". id values should unique on page. consider switching class="product" instead.)