Aligning in multi-element div

Question

Hi, I have this div that is showing the products for an e-commerce site.

I have it well alligned with css and a table inside it, but using tables for content seems to be frowned upon/not the best so I'm trying to do it correctly, hasn't worked out so far. The products div looks like this:

Crude unedited screenshot : http://img255.imageshack.us/img255/6832/printt.png

That is the look I want. I tried nesting 2 divs in the products div, one floating right with the image, title and description, the other one floating right with the table elements.

Thought I had worked it out to a decent look on some pages, but on others (displaying other products) it looks different and messed up. I'm thinking this is due to the fact the links were taking on the width of the whole products div, ending up over the right div.

How do I stop that behavior, I want the links to wrap around the text maybe the problem would go away then. Or are you suggesting something else?

HTML looks like this :

<div id="products">
        <a href="detalii.php?id_produs=4"><img src="fetch.php?id=4" width="129" height="129" alt="PRC200" /></a>
        <a href="detalii.php?id_produs=4"><h3>PRC200</h3></a>
        <table border="0">
        <tr>
            <td><h4>100,00 RON</h4></td>
        </tr>

        <tr>

            <td class="out">Indisponibil</td>
        </tr>

        <form action="" method="post">
        <tr>
            <td><input type="image" src="images/button_basket.jpg" name="submit_cos" width="118" height="25" /></td>
        </tr>
        </form>
        <form action="detalii.php" method="get">

        <tr>
            <td>
            <input type="hidden" name="id_produs" value="4" />
            <input type="image" src="images/button_details.jpg" name="submit_detalii" width="118" height="25" />
            </td>
        </tr>
        </form>
        </table>
        <a href="detalii.php?id_produs=4"><p>M-am saturat de atatea litere si numere</p></a>    
        </div>

Answer 1

Here is a tableless solution. Keep in mind take the tags and place them in an external CSS file. By using a tableless structure you'll see how much more condensed the code is.

<style>
.product { border:1px solid red; padding:10px; }
.productimg { float:left; padding-right:15px; }
.purchasedetails { float:right; padding-left:15px; }

</style>        
<div id="products">
    <div class="product">        
        <div class="purchasedetails">
            <h4>100,00 RON</h4>
            <p>Indisponibil</p>
            <input type="image" src="images/button_basket.jpg" name="submit_cos" width="118" height="25" /><br />
            <input type="image" src="images/button_details.jpg" name="submit_detalii" width="118" height="25" />
        </div>

        <div class="productimg"><a href="#"><img src="fetch.php?id=4" width="129" height="129" alt="PRC200" /></a></div>

        <h3><a href="#">PRC200</a></h3>
        <p class="description">Insert Description Here</p>
        <div style="clear:both;"></div>

    </div> 
</div>

I only have this nexted inside the <div id="products"> because it was listed in your code. The inside products div would essentailly fill whatever content area it is placed in whether it is a <td> or<div>