Выравнивание колонок div по высоте

[grishunya]

Здравствуйте, помогите решить проблему:нужно выровнять все колонки по высоте независимо от того, сколько в них текста.
Есть html:

<div>
<div>
<div class="content-col-img">
Изображение товара
&nbsp;
</div>
<div class="content-col-artikle">
Артикул
&nbsp;
</div>
<div class="content-col-name">
Наименование товара
&nbsp;
</div>
<div class="content-col-price">
цена
&nbsp;
</div>
<div class="content-col-description">
Описание,размер,цвет
&nbsp;
</div>
<div class="content-col-directory">
Ссылка на товар
&nbsp;
</div>
<div class="content-col-cart">
Купить
&nbsp;
</div>
</div>

<div>
<div class="content-col-img">

&nbsp;
</div>
<div class="content-col-artikle">

&nbsp;
</div>
<div class="content-col-name">

&nbsp;
</div>
<div class="content-col-price">

&nbsp;
</div>
<div class="content-col-description">

&nbsp;
</div>
<div class="content-col-directory">

&nbsp;
</div>
<div class="content-col-cart">

&nbsp;
</div>
</div>

Есть css к нему:

body {
background: #f5f5f5;
}

.content-col-img {
float:left;
width:20%;
padding:0%;
border: 1px solid #ccc;
background: #fff;
}

.content-col-artikle {
float:left;
width:7%;
padding:0%;
border: 1px solid #ccc;
background: #fff;
}
.content-col-name {
float:left;
width:20%;
padding:0%;
border: 1px solid #ccc;
background: #fff;
}
.content-col-price {
float:left;
width:7%;
padding:0%;
border: 1px solid #ccc;
background: #fff;
}
.content-col-description {
float:left;
width:22%;
padding:0%;
border: 1px solid #ccc;
background: #fff;
}
.content-col-directory {
float:left;
width:15%;
padding:0%;
border: 1px solid #ccc;
background: #fff;
}
.content-col-cart {
float:left;
width:7%;
padding:0%;
border: 1px solid #ccc;
background: #fff;
}

img {
max-width: 100%;
width: auto;
height: auto;
}

Что нужно и где прописать в css чтобы при добавлении текста в html между div все столбцы оставались одинаковыми по высоте? Весь нэт перерыл, ни один способ не подошёл-таблица перекашивается.
Надеюсь на помощь!

 

[galograff]

задай стандартную высоту для
height: ???px;

для убедительности что все норм
background: red; он тебе покажет что все ровно независимо от количества текста

 

[Slvkxxx]

Если необходимо чтобы высота была не фиксированной, а зависела от высоты самого длинного столбца, то я скрипты использую для этого.

$(document).ready(function() {
function setEqualHeight(columns)
{
var tallestcolumn = 0;
columns.each(
function()
{
currentHeight = $(this).height();
if(currentHeight &--#62; tallestcolumn)
{
tallestcolumn  = currentHeight;
}
}
);
columns.height(tallestcolumn);
}
setEqualHeight($("#leftSidebar,#content"));
});

Должна быть подключена библиотека JQ. А в последней строке скрипта укажите селекторы элементов которые необходимо выровнять.