В чем моя ошибка в этом CSS-коде с плавающей точкой для кода столбца

Question

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

CSS

.3col {
        left:0;
        float:left;
        top:0;
        height:100%;
        width:200px;
}

HTML

<section id="otherArticles">
    <article>
      <div class="3col">
      <header><h3>Lorem ipsum dolor sit amet</h3></header>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p></div>
    </article>  

        <article>
      <div class="3col">
      <header><h3>Lorem ipsum dolor sit amet</h3></header>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p></div>
    </article> 

        <article>
      <div class="3col">
      <header><h3>Lorem ipsum dolor sit amet</h3></header>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p></div>
    </article> 
</section>

Answer 1

HTML ID и CSS-классы не могут начинаться с цифры!Измените 3col на что-то вроде column.

Вот упрощенный пример :

CSS:

<style>
    .column {
        float: left;
        width: 200px;
    }
</style>

HTML:

<div class="column">
    <h3>Test</h3>
    <p>Rutrum vitae vestibulum condimentum metus...</p>
</div>

Answer 2

Ваш float должен быть на article.

Смотрите пример здесь: http://jsfiddle.net/kMnS7/

Помните: только современные браузеры распознают article. Вам нужен HTML5 js shiv , чтобы он работал в старых версиях Internet Explorer.

Answer 3

Дайте float вашему article вместо .3col или удалите тег <article>.Никогда не начинайте именовать class & ID с numerical number, напишите так .col3 вместо .3col

Проверьте это:

http://jsfiddle.net/AZ83d/

Изменить проверку имениэто:

http://jsfiddle.net/AZ83d/2/