I am currently attempting to design a box layout featuring an image on the left and text (including title, price, and description) on the right side. However, I am facing an issue where the text consistently appears outside of the designated box area. Can anyone identify what mistake I might be making in my approach?
.photo {
width: 100%
}
.menu__item {
width: 100%;
border: 1px solid #c4c4c4;
display: block;
}
.menu__item__photo {
width: 40%;
padding-right: 16px;
display: block;
}
.menu__item__info__photo {
width: 60%;
display: block;
float: right;
}
.menu__item__info__title {
float: left;
width: 78%;
}
.menu__item__info__price {
float: right;
width: 21%;
text-align: right;
}<div class="menu__item">
<div class="menu__item__photo">
<img src="http://placehold.it/350x150" class="photo">
</div>
<div class="menu__item__info__photo">
<div class="menu__item__info__title">Product Title Here</div>
<div class="menu__item__info__price">$9.99</div>
<div class="menu__item__info__description">Description here..</div>
</div>
</div>For reference, you can view a fiddle of this code at: https://jsfiddle.net/pxanzefe/