Aligning list of text next to image

Question

I want to create a list of products similar to the way that Ebay shows these in "List View". Its essentially an unordered list, where an image is shown on the left (33% width) and the title/subtitle/attributes/price are shown next to it on the right.

I've tried dozens of examples found on Stack Overflow with little success. I've seen arguments stating that floating it left is best and arguments saying inline-block is best. Neither seems to work entirely, leaving me confused as to how to accomplish this.

The following snippet gets the general idea, but if the text content extends vertically further than the image, it throws off the layout. The list item should essentially work as display:block with 2 columns inside, 1 for the image and 1 for text description.

Example Code:

<ul>
    <li style="width:100%;display:flex;">
        <div style="width:33%;">
            <img src="http://thumbs.ebaystatic.com/images/m/m4JYJFjgp9rwTii4MicWiDA/s-l225.jpg">
        </div>
        <div style="flex:1;">
            <ul>
                <li><h3 class="title">This Is Some Type of Product Title</h3></li>
                <li class="subtitle">This is a longer description text that appears smaller below it</li>
                <li class="attr">Soft Wooly Cloth Fabric</li>
                <li class="attr">Big Screen</li>
                <li><span class="price" style="font-weight:bold;">9.99$</span></li>
                <li class="attr">More Attributes</li>
                <li class="attr">More Attributes</li>
                <li class="attr">More Attributes</li>
            </ul>
        </div>
    </li>
</ul>

Desired Layout:

Answer 1

I did it. Check the code but is not responsive. You can modify it as you can. I hope this helps.

*, html {
 padding: 0;
 margin: 0;
}
body {
 padding: 0;
 margin: 0;
 background: #fff;
 color: #000;
 font-size: 15px;
 font-family: Arial;
}
.clear {
 clear: both
}
#productbox {
 float: left;
 display: block;
 margin: 8px;
    width: 794px;
}
.product {
 width: 100%;
 float: left;
 padding-bottom: 8px;
    margin-bottom:10px;
    border-bottom: 1px solid #e4e4e4;
}
.product:last-child {
  border-bottom: none;
}
.product_img {
 float: left;
 width: 227px;
 height: auto;
 border-radius: 3px;
 border: 1px solid #e4e4e4;
}
.product_content {
 float: left;
 margin-left: 12px;
 width: 552px;
 text-align: left;
}
.product_title {
 float: left;
 margin-top: -2px;
 text-align: left;
 color: #0654ba;
}
.product_title a {
 font-weight: normal;
 font-size: 16px;
 color: #0654ba;
 text-decoration: none;
}
.product_title a:hover {
 text-decoration: underline;
}
.product_special {
 float: left;
 margin-top: 6px;
 font-size: 14px;
 color: #767676;
}
.product_info {
 float: left;
 margin-top: 10px;
 width: 275px;
 height: auto;
 background: #fff;
}
.product_price {
 float: left;
 font-size: 20px;
 font-weight: bold;
 color: #333;
 line-height: 1.1;
}
.price_info {
 float: left;
 margin-top: 4px;
 font-size: 13px;
 color: #767676;
}
.ship {
 float: left;
 margin-top: 6px;
 font-size: 13px;
 font-weight: bold;
 color: #333;
}
.sold {
 float: left;
 margin-top: 10px;
 font-size: 13px;
 font-weight: bold;
 color: #dd1e31;
}
.more_link {
 float: left;
 margin-top: 6px;
 font-size: 13px;
}
.more_link a {
 font-size: 13px;
 color: #0654ba;
 text-decoration: none;
}
.more_link a:hover {
 text-decoration: underline;
}
.additional {
 float: left;
 margin-top: 10px;
 width: 275px;
 height: auto;
 background: #fff;
}
.country {
 float: left;
 margin-top: 4px;
 font-size: 13px;
 color: #767676;
}
.other {
 float: left;
 margin-top: 6px;
 font-size: 13px;
 color: #767676;
}
.topseller {
 float: left;
 margin-top: 15px;
 width: 80px;
 height: 19px;
 background: url(http://s23.postimg.org/e7dqd4izf/top.png);
}

<!-- start block -->
<div id="productbox"> 

<!-- start product -->       
<div class="product">
<div class="product_img"><img src="http://thumbs.ebaystatic.com/images/m/m4JYJFjgp9rwTii4MicWiDA/s-l225.jpg"></div>
 <div class="product_content"> 
<div class="product_title"><a href="">NWT New Polo Ralph Loren Adjustable Strap Pony Logo Baseball Hat Cap 1 Size</a></div>
<div class="clear"></div>
<div class="product_special">Free Shipping ! 30 Day Warranty ! USA Seller</div>
<div class="clear"></div>
<div class="product_info">
<div class="product_price">$23.88</div>
<div class="clear"></div>
<div class="price_info">Buy It Now</div>
<div class="clear"></div>
<div class="ship">Free shipping</div>
<div class="clear"></div> 
<div class="sold">4315 sold</div>
<div class="clear"></div>
<div class="more_link"><a href="#">See more like this</a></div>
</div>
<div class="additional">
<div class="country">From China</div>
<div class="clear"></div>
<div class="other">Customs services and international tracking provided</div>
<div class="topseller"><div class=""></div>
<div class="clear"></div>
</div>
</div> 
</div>        
</div>
<!-- end of product -->

<div class="clear"></div>

<!-- start product -->       
<div class="product">
<div class="product_img"><img src="http://thumbs.ebaystatic.com/images/m/m4JYJFjgp9rwTii4MicWiDA/s-l225.jpg"></div>
 <div class="product_content"> 
<div class="product_title"><a href="">NWT New Polo Ralph Loren Adjustable Strap Pony Logo Baseball Hat Cap 1 Size</a></div>
<div class="clear"></div>
<div class="product_special">Free Shipping ! 30 Day Warranty ! USA Seller</div>
<div class="clear"></div>
<div class="product_info">
<div class="product_price">$23.88</div>
<div class="clear"></div>
<div class="price_info">Buy It Now</div>
<div class="clear"></div>
<div class="ship">Free shipping</div>
<div class="clear"></div> 
<div class="sold">4315 sold</div>
<div class="clear"></div>
<div class="more_link"><a href="#">See more like this</a></div>
</div>
<div class="additional">
<div class="country">From China</div>
<div class="clear"></div>
<div class="other">Customs services and international tracking provided</div>
<div class="topseller"><div class=""></div>
<div class="clear"></div>
</div>
</div> 
</div>        
</div>
<!-- end of product -->

</div>       
<!-- end of block -->

Answer 2

I had same the problem when I developed a price comparison tool for eBay and Amazon. I solved it by using a div with two nested divs for item image and item specs.

Answer 3

You need code it better then now. Make parent div, then div for image, div for content and style it in CSS. Now You have 33% width for image, but not width for content eg: h3, text.