Выравнивание в многоэлементном div

Question

У меня есть этот div, показывающий продукты для сайта электронной коммерции.

У меня он хорошо сложен с CSS и таблицей внутри него, но использование таблиц для контента кажется неодобренным/не лучшим, поэтому я пытаюсь сделать это правильно, пока не получилось. Продукты ДИВ выглядит следующим образом:

Сырая неотредактированным скриншот: http://img255.imageshack.us/img255/6832/printt.png

Это взгляд, который я хочу. Я попытался вложить 2 divs в div продуктов, один плавающий справа с изображением, названием и описанием, другой плавающий справа с элементами таблицы.

Думал, что на некоторых страницах я работал с достойным взглядом, но на других (с отображением других продуктов) он выглядит по-другому и испорчен. Я думаю, что это связано с тем, что ссылки занимают ширину всего продукта div, и заканчиваются над правым div.

Как прекратить это поведение, я хочу, чтобы ссылки обтекали текст, возможно, проблема исчезнет тогда. Или вы предлагаете что-то еще?

HTML выглядит следующим образом:

<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

Вот бестабличное решение. Имейте в виду, что теги и размещайте их во внешнем файле CSS. Используя безвоздужную структуру, вы увидите, насколько сложнее код.

<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> 

Я только это nexted внутри <div id="products">, потому что он был включен в вашем коде. Внутренние продукты div должны были бы заполнить любую область содержимого, в которую она помещена, будь то <td> или <div>