After finding a helpful example on Stack Overflow, I successfully implemented a similar layout for product boxes in a JSFiddle. I then replicated the CSS and HTML almost exactly on my Wordpress blog, but encountered an issue where the title, description, and price no longer floated next to the image as intended.
With this unexpected change, I am somewhat puzzled as to what may have caused my custom styling to break. Any guidance on identifying and resolving the root cause would be greatly appreciated.
HTML:
<div class="info-container-left">
[usrlist "Ease of Use:5" "Build Quality:5" "Features:4" "Price:5" "Overall:4.65" text=false]
<div class="product-container">
<div class="product-thumb"><img src="https://letsprint3d.net/wp-content/uploads/2017/05/cetus3d_base.png" /></div>
<div class="product-content">
<h3 class="product-title">
<a href="#">Cetus3D Printer</a>
<div class="product-price">$299</div>
</h3>
<p>Compact 3D Printer with a large build volume using a form follows function design.</p>
</div>
</div>
<div class="product-container">
<div class="product-thumb"><img src="https://letsprint3d.net/wp-content/uploads/2017/05/cetus3d_extended.png" /></div>
<div class="product-content">
<h3 class="product-title">
<a href="#">Cetus3D Extended</a>
<div class="product-price">$399</div>
</h3>
<p>Includes a longer Z-Axis, providing an extended build volume of 180x180x280mm.</p>
</div>
</div>
</div>
CSS:
.info-container-left {
width: 50%;
padding: 0 10px 0 0;
float: left;
}
.info-container-right {
width: 50%;
padding: 0 10px 0 0;
float: right;
}
.product-container {
margin: 10px 20px 0 0;
padding: 10px;
border: 1px solid #eee;
width: 100%;
}
.product-thumb {
float: left;
}
.product-thumb img {
display: block;
}
.product-content {
margin-left: 90px;
}
.product-title {
font-weight: bold;
font-size: 100%;
margin-top: 0;
}
.product-title a {
text-decoration: none;
}
.product-price {
float: right;
}
Expected Layout (JSFiddle):
https://i.stack.imgur.com/1aYd9.png
Current Layout (My Website):