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

Question

I currently have a set of 'product' divs inside a wrapping containers. These product divs contain an image, header and p text. For some reason, the length of the p text is changing the position of the parent product div. Here is a screenshot: https://gyazo.com/9504729541e6bee17a27e4121af3a1c9
The p and h2 elements both have 0 padding and margins.
I will try to keep my code as minimal as 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 and melted cheese with the option of salsa, jalapenos, ground meat, guacamole and 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 and melted cheese with the option of salsa, jalapenos, ground meat, guacamole and 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;
}

Answer 1

Your #product elements are display: inline-block. This means they will take inline level characteristics, one of which is baseline alignment (i.e., vertical-align: baseline).
Override the default setting with vertical-align: top.
(Also, you have multiple elements with id="product". ID values should be unique on a page. Consider switching to class="product" instead.)

Answer 2

add vertical-align:top to #product.
#product {
display: inline-block;
height: 352px;
width: 200px;
vertical-align: top;
margin: 10px;
border: solid 2px black;
}
And one more thing, its not a best practice to have same id's for different elements. Instead make it .product class.