Выравнять по левому краю список DL с помощью CSS.

[camka]

Выравнять по левому краю список DL с помощью CSS.

Имеем список, который, по большому счету, представляет из себя две колонки - имя атрибута и его значение.

<dl>
    <dt>Name 1:</dt>
    <dd>Value 1</dt>

    <dt>Name 222222:</dt>
    <dd>Value 222222</dt>

    <dt>Name 333:</dt>
    <dd>Value 333</dt>
</dl>

Хочу представить его так, чтобы пара Имя-Значение располагались на отдельной строке и выравнены по левому краю.

Name 1:  Value 1
Name 222222:  Value 222222
Name 333:  Value 333

Создаю стиль
<style>
dl { padding: 0px; margin: 0px; }
dt, dd { float: left; padding: 0px; margin: 0px; }
dt { clear: left; }
</style>

(режим STRICT)

Который должен бы сносить каждое следующее имя на строку ниже. Но в IE, почему-то, не работает: все значения остаются в первой строке, а наименования успешно переносятся. В других же браузерах поведение вполне отвечает моим ожиданиям.

Добавление dd { clear: right; } тоже не помогает.

Подскажите пожалуйста, как с помощью стиля заставить IE отображать список желаемым образом.

 

[@ndrey]

а, если просто так?
dl { padding: 0px; margin: 0px; }
dt { float: left; }

 

[camka]

@ndrey
Благодарю. Отображает, как надо.

Вот только на практике смешение плавающих и неплавающих элементов иногда приводило к непредсказуемым последствиям. Возможно, кто-то сможете _адекватно_ объяснить поведение IE - почему свойства clean: right; или clean: left; не сносят _все_ последующие элементы ниже, и как можно это обойти.

 

[@ndrey]

вполне возможно, что "поскольку float’ы не придумывались как средство создания колонок..", то IE так себя и ведет..
возможно это пригодится.
зы: кстати, firefox непредсказуемо ведет себя при пробелах. проблема возникает при генерации диначеского кода средствами js, если html код не писать в одну строчку, то firefox отказывается видеть float, причем напрочь. как результат - на экране шоу.