Вот как реализовано у меня на сайте но там table и так далее , каша вообщем .
Это вид нормальный .
Это сжатый
А вот CSS , я текст накидал по больше чтобы посмотреть будет он заползать или нет на левый текст .
Вот сжатый вариант
Как это можно исправить ?
Чтобы если появляется какой символ с лева первый то сужение прекращалось не наезжало на другие данные .
<div class="properties-img">
<img src="http://img06.wikimart.ru/db/80/59290408-7e51-4f30-b9fc-f0dca680dbc0.jpeg">
<div class="properties-block">
<dl>
<dd class="fr">10 дюйм</dd>
<dt><span>Размер экрана</span></dt>
</dl>
<dl>
<dd class="fr">Android 4.2</dd>
<dt><span>Операционная система</span></dt>
</dl>
<dl>
<dd class="fr">1700 Мгц</dd>
<dt><span>Частота процессора</span></dt>
</dl>
<dl>
<dd class="fr">Samsung Exynos 5250</dd>
<dt><span>Процессор/чипсет</span></dt>
</dl>
<dl>
<dd class="fr">2048 Мб</dd>
<dt><span>Размер оперативной памяти</span></dt>
</dl>
<dl>
<dd class="fr">32 Гб</dd>
<dt><span>Размер встроенной памяти</span></dt>
</dl>
<dl>
<dd class="fr">емкостный</dd>
<dt><span>Тип сенсорного экрана</span></dt>
</dl>
<dl>
<dd class="fr">Да</dd>
<dt><span>Мультитач-экран</span></dt>
</dl>
<dl>
<dd class="fr">Нет</dd>
<dt><span>Поддержка 3D</span></dt>
</dl>
<dl>
<dd class="fr">Доступ и воспроизведение любых мультимедийных файлов на TV напрямую с вашего компьютера</dd>
<dt><span>Bluetooth</span></dt>
</dl> <dl>
<dd class="fr">Доступ и воспроизведение любых мультимедийных файлов на TV напрямую с вашего компьютера</dd>
<dt><span>Bluetooth</span></dt>
</dl>
</div>
</div>
.properties-img img{
margin-top: 200px;
float: right;
position: relative;
margin: 20px 30px 0;
width: 300px;
}
.properties-block {
margin-right: 400px;
}
.properties-block dl {
padding: 0 0 8px 0;
background: url([url]http://c12.0cw.ru/img/new-model-page/property-dot.png[/url]) repeat-x 0 16px;
}
.properties-block {font-size: 13px;}
.properties-block dt {color: #666;}
.properties-block dd, .properties-block dt span {background: #fff; padding-left: 10px;}
.fr {float: right;}