What is my mistake in this CSS float method for column code

Question

I just want to make three articles from 3 columns, when I encode it using Dreamweaver in the development mode panel, they are in three columns, but when I view it using the live view mode or browser, it does not appear in three columns, what are the possible code errors I made?

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 ids and CSS classes cannot begin with a number! Change 3col to something like column .

Here's a simplified example :

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

Your float should be on article .

See an example here: http://jsfiddle.net/kMnS7/

Be aware: only modern browsers recognize article . You need HTML5 js shiv to work on older versions of Internet Explorer.

Answer 3

Give the float to article instead of .3col or remove the <article> . Never start naming a class & ID with a numerical number like this: .col3 instead of .3col

Check this:

http://jsfiddle.net/AZ83d/

Change the name to check this:

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