Moving text next to image - php

Question

I'm working with osCommerce for the first time. I inherited this code, and we'd like to tighten up the new_products page. This is the code for the display:
div class="contentText">
<div class="NewProductsList">
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr>
<td style="border-bottom:solid 1px #ccc;">
<div class="outer">
<div id="x">
<img src="images/swords-sandals.jpg" alt="Swords, Sandals and Sirens" title="Swords, Sandals and Sirens" width="120" height="180" />
<span class="name-font">
Swords, Sandals and Sirens
</span>
<span class="price-font">$19.00</span>
<br /><br />
Murder, conmen, elephants. Who knew ancient times could be such fun?
<br /><br />
Many of the stories feature Claudia Seferius, the
...read more
</div>
</div>
Then this is my stylesheet (css) code:
<style>
.price-font {
float: right;
color: #000000;
font-size: 18px;
}
.name-font {
font-size: 14px;
font-weight: bolder;
}
.outer {
padding: 10px;
}
#x {
display: inline-block;
}
#y {
width: 82%;
vertical-align: top;
display: inline-block;
}
.NewProductsList tr.alt td #x {
float: right;
}
.NewProductsList tr.alt td {
background-color: #ecf6fc;
}
Any help I could get for tightening up the text so that it's directly next to the image, rather than under it, would be greatly appreciated.
Thanks!

Answer 1

Try adding this to your CSS:
#x > a {
float: left;
}
JSFiddle: https://jsfiddle.net/suomyone/h2j013dx/
Basically, this targets the product link (and image, in this case) and floats it to the left. As a result, the product title and description moves up, right next to the image. You'll have to play around with the margins or paddings to achieve the desired spacing between the image and text.
Was this the effect you were looking to get?
Ps. Your HTML is missing some closing tags, specifically </td>, </tr>, </table>, and two </div> tags. I added these to the JSFiddle demo.