Помогите сверстать правильно блок с товаром

[bukarovalogin 3]

Здравствуйте, помогите пожалуйста правильно сверстать блок с товаром с наименьшим количеством кода. Делала сама получилась куча строк, по моему лишних. Приложен скрин уже готового блока и строки кода CSS и HTML. Рассмотрю любые варианты. Можно также на вид или красивее, кто что сможет. Выражаю заранее огромную благодарность тем, кто поможет мне в реализации этой задачи!!!!

HTML

[head]

<div class="all_posic">

[/head]

[line]

<a href="{good_url}" title="{name}"><div class="name_posic">{name}</div></a>

<div class="okno">

<div class="imgtovara"><center>{image}</center></div>

<div class="sale">S A L E</div>

<div class="pr">Новая цена {price}</div>

<div class="pro">{price_old}</div>

</div>

[/line]

[foot]

</div>

[/foot]

CSS

/* стилизация левого блока дешевых товаров */

.all_posic											   { display:inline; }

.name_posic										  { padding: 5px 5px 5px 5px; color: #ffffff; font-weight: bold; background-color: #b22422;

-webkit-border-radius: 3px 3px 0 0;

    -moz-border-radius: 3px 3px 0 0;

   border-radius: 3px 3px 0 0;

}

.okno { margin: 0  0 15px 0; padding: 7px 0 39px 0;  border: 1px solid #c22515;

-webkit-border-radius: 0 0 3px 3px;

    -moz-border-radius: 0 0 3px 3px;

   border-radius: 0 0 3px 3px;

}

.imgtovara											   { float: center!important; margin: 5px 0 0 0; }

.pro										  { text-decoration:line-through; color: #ffffff; position: relative; margin: 10px 0 0 0; padding: 7px 5px 7px 5px; font-weight: bold; float: left; background-color: #b22422;

-webkit-border-radius: 0 3px 0 0;

    -moz-border-radius: 0 3px 0 0;

   border-radius: 0 3px 0 0;

}

.pr										  { position: relative; margin: 10px 0 0 0; padding: 7px 5px 7px 7px; font-weight: bold; float: right; background-color: #7fff00;

-webkit-border-radius: 3px 0 0 0;

    -moz-border-radius: 3px 0 0 0;

   border-radius: 3px 0 0 0;

}

.sale										  { font-family: georgia; font-size: 14px; color: #7fff00; position: relative; margin: -62px 0 0 0; padding: 7px 10px 7px 7px; float: left; background-color: #b22422;

-webkit-border-radius: 0 3px 3px 0;

    -moz-border-radius: 0 3px 3px 0;

   border-radius: 0 3px 3px 0;

}

Задача сократить кол-во кода и сделать этот блок правильным, т.е чтобы ничего никуда не съезжало, и если цена товара увеличивается, чтобы просто растягивалось поле, а не было фексированным

[Lomot 134]

float: center!important; ??? http://htmlbook.ru/css/float

[bukarovalogin 3]

float: center!important; ??? http://htmlbook.ru/css/float

Да

[Lomot 134]

float: center!important; ??? http://htmlbook.ru/css/float

Да

что "да"?) доступные значения left | right | none | inherit

http://www.w3.org/TR/CSS21/visuren.html#propdef-float