Странное поведение при использовании столбцов float и CSS

#css

#css

Вопрос:

Я не уверен, ошибка это или нет, но разве раскрывающийся список не должен отображаться в первом столбце в примере ниже? Или перенос всего текста во второй столбец?

Как я могу заставить букву правильно сочетаться с текстом?

 .columns{
    -webkit-column-width:150px;
    display:inline-block;
    height:200px;
    overflow:hidden;
    border:1px solid black;
}

span.dropcaps {
    float: left;
    font-size: 50px;
    line-height: 50px;
    padding-top: 1px;
    margin-top: -.09em;
    margin-right: .09em;
}
  

http://jsfiddle.net/8qLeE/2/

Комментарии:

1. Это зависит от многих других факторов, включая «положение» других элементов, которые могут создавать помехи. Я предлагаю использовать Chrome или FF Inspect Element и поработать с вашим кодом там. Это лучший способ устранить странное поведение в CSS.

2. Зачем вам float? Какого эффекта вы пытаетесь достичь?

3. @ZachSaucier Это выпадающий список, его нужно использовать с плавающей запятой…

4. @VilmosIoo Этот комментарий никак не помогает нам понять, какого эффекта вы хотите.

5. @ZachSaucier извините. Это тот эффект, который я ищу en.m.wikipedia.org/wiki/Initial Обратите внимание, что float предлагается в качестве способа сделать это.