Вопрос по верстке каталога товаров

[sokrbam]

Уважаемые специалисты!

Ломал голову, но так и не понял каким образом сделать следующее.
В скриншоте видно проблему, нижний средний товар (синее сердце) имеет описание более длинное, чем слева и справа, из-за этого высота среднего нижнего блока становится больше, чем у правого и левого блока. Как можно сделать,  если у одного блока больше символов, то другие блоки ровнялись бы под него?

[вложение удалено администратором]

[sokrbam]

может по коду можно определить:

product_brief:

Код: [Выделить]

{* product brief view (from a category or search) *}
{if $product_info ne NULL}
{assign var="id" value=$product_info[11]}
<div id="tovar_catalog">



<div class="radius_foto_top"></div>
  <div class="tovar_foto" width="{$smarty.const.RESIZE_SMALL_Y}">
  <a href="./{$product_info[13]}">
{if $product_info[7] || $p_default[$id]}
<img id="dp{$product_info[11]}" style="text-align: center" src="./products_pictures/{if $p_default[$id]}{$p_default[$id]}-S.jpg{else}{$product_info[7]}{/if}" alt="{$product_info[1]|replace:'"':'&quot;'}" />
                {assign var="pict" value=$product_info[7]}
{else} <img id="dp{$product_info[11]}" src="./products_pictures/nophoto.jpg" alt="No photo" width="110px" height="110px" />
                  {assign var="pict" value='nophoto.jpg'}
                 
{/if}
</a>
           <input type="hidden" id="simg{$product_info[11]}" value="{$pict}"> 
  </div>
  <div class="radius_foto_bottom"></div>
<div class="top_link">
<a href="./{$product_info[13]}" class="top_link2"><h3>{$product_info[1]}</h3></a>
</div>
 



  <div id="cena_zakaz">
    <div class="cena">{$product_info[24]}</div>
<div class="button_zakaz">{if $product_info[28]>0}
<a id="tocart_{$product_info[11]}" class="ajaxcart newbutton" href="./add2cart/{$product_info[14]}"></a>{/if}</div>
  </div>
</div>
{/if}     


а это css:

Код: [Выделить]

.radius_foto_top{
width: 220px;
height: 3px;
background: url('../image/bg_block_top.gif') no-repeat left top;
}

.radius_foto_bottom {
width: 220px;
height: 3px;
background: url('../image/bg_block_bottom.gif') no-repeat left top;
}

#tovar_catalog{
float: left;
width: 220px;
height: 100%;
margin: 0px 20px 0px 0;


}

.top_link {

margin-top: 2px;

}

.top_link a  h3{
font-size: 12px;
font-weight: normal;
padding: 5px 0px 5px 1px;
line-height: 1.071;
margin: 0px;
text-align: left;
}

.top_link  a {
color: #42424A;
font-size: 14px;
text-decoration: none;
}

#cena_zakaz {
width: 220px;
float: left;
padding: 5px 0px 0px 0px;
border-bottom: 1px solid #E7E8E7;
border-top: 1px solid #E7E8E7;
}



.cena {
float: left;
color: #42424A;
font-size: 16px;
text-align: center;

}

.newbutton{
background: url('../image/button_kupit.png') no-repeat;
width: 66px;
height: 18px;
float: right;
}

.tovar_foto {
width: 218px;
height: 124px;
border-left: 1px solid
#E6E4E4;
border-right: 1px solid
#E6E4E4;
text-align: center;
vertical-align: middle;
display: table-cell;
}
А еще обнаружил, когда делаешь в хроме просмотр кода элемента, он мне показывает как-будто у меня каталог сделан таблицами, а как видно из моего product_brief - у меня все дивами!?

[sokrbam]

сделайте описанию фиксированую высоту, если потом ее не хватит увеличте

Спасибо, за ответ. Такой вариант не очень красиво смотрится. т.к. в какой то колонке может быть всего одна строчка, а занимает 50px фиксированной высоты.
Получается, что то о чем я говрю, делается с помощью скриптов?

[Dias]

Дело в том, что вариантов исправить Вашу проблему много, нужно было для начала обратиться к поисковым системам.

http://www.xiper.net/collect/html-and-css-tricks/karkas-verstki/blocks-of-equal-height-in-row.html

http://www.xiper.net/collect/html-and-css-tricks/karkas-verstki/kolonki-ravnoy-visoty.html

http://habrahabr.ru/post/64173/

И так далее, пробуйте.

[sokrbam]

Дело в том, что вариантов исправить Вашу проблему много, нужно было для начала обратиться к поисковым системам.

http://www.xiper.net/collect/html-and-css-tricks/karkas-verstki/blocks-of-equal-height-in-row.html

http://www.xiper.net/collect/html-and-css-tricks/karkas-verstki/kolonki-ravnoy-visoty.html

http://habrahabr.ru/post/64173/

И так далее, пробуйте.

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

Код: [Выделить]

<div class="row">
    <div class="item">
        содержимое
    </div>
    <div class="item">
        содержимое
    </div>
    <div class="item">
        содержимое
    </div>
</div>

<div class="row">
    <div class="item">
        содержимое
    </div>
    <div class="item">
         содержимое
    </div>
    <div class="item">
        содержимое
    </div>
</div>

А мы имеем такую конструкцию:

Код: [Выделить]

<div class="row">
              <div class="item">
               содержимое
              </div>
          </div>

[sokrbam]

Причем сдесь скрипт это верстка html+css
Скрипт лиш отвечает за выдачу данных из БД а уж как они будут выводиться (оформлены) это дело верстки

вот описывается подобный скрипт _http://shublog.ru/ajax/jquery/kolonki-odinakovojj-vysoty-luchshijj-script/

[Dias]

Чтобы привести конструкцию к такому виду:

Код: [Выделить]

<div class="row">
    <div class="item">
        содержимое
    </div>
    <div class="item">
        содержимое
    </div>
    <div class="item">
        содержимое
    </div>
</div>

<div class="row">
    <div class="item">
        содержимое
    </div>
    <div class="item">
         содержимое
    </div>
    <div class="item">
        содержимое
    </div>
</div>
нужно еще и отредактировать category.tpl.html.

[sokrbam]

Чтобы привести конструкцию к такому виду:

Код: [Выделить]

<div class="row">
    <div class="item">
        содержимое
    </div>
    <div class="item">
        содержимое
    </div>
    <div class="item">
        содержимое
    </div>
</div>

<div class="row">
    <div class="item">
        содержимое
    </div>
    <div class="item">
         содержимое
    </div>
    <div class="item">
        содержимое
    </div>
</div>
нужно еще и отредактировать category.tpl.html.

Dias, огромное спасибо. Думаю теперь покопаюсь и все получится.

[sokrbam]

Чтобы привести конструкцию к такому виду:

Код: [Выделить]

<div class="row">
    <div class="item">
        содержимое
    </div>
    <div class="item">
        содержимое
    </div>
    <div class="item">
        содержимое
    </div>
</div>

<div class="row">
    <div class="item">
        содержимое
    </div>
    <div class="item">
         содержимое
    </div>
    <div class="item">
        содержимое
    </div>
</div>
нужно еще и отредактировать category.tpl.html.

Блин, не удалось мне победить эту проблему.
здесь тоже нельзя вроде вставить структуру как в примере выше.

Код: [Выделить]

<table id="products" style="text-align: center; vertical-align: top; width: 100%;" cellpadding="0" cellspacing="0">
{section name=i1 loop=$products_to_show max=$products_to_show_count}
{if $smarty.section.i1.index is div by $smarty.const.CONF_COLUMNS_PER_PAGE}   <tr>
{/if}
<td style="text-align: center;  vertical-align: top; padding: 5px; width: {math equation="x/y" x=100 y=$smarty.const.CONF_COLUMNS_PER_PAGE|string_format:"%d"}%">
{include file="product_brief.tpl.html" product_info=$products_to_show[i1] options=$options}
    </td>
{if ($smarty.section.i1.index+1) is div by $smarty.const.CONF_COLUMNS_PER_PAGE}   </tr>
{/if}
{/section}





</table>

[sokrbam]

все можно просто, вам либо не хватает логики либо знаний смарти

Со смарти вообще не знаком. Буду искать по смарти видео обучалки.

[sokrbam]

http://www.smarty.net/docsv2/ru/

спасибо за напутствие