How To Add Multiple Columns On Blogger Post With CSS 3

If you are a reporter and want to blog on news then having a three column layout on your post will make it more interesting. With CSS 3 you can divide your post layout into three column similar to newspaper style. This multiple columns layout can be view on Mozilla firefox and also Safari browser. 
You can do this by using property column count in CSS style. Follow these steps bellow on how to add multiple columns on blogger post.

Steps on how to add multiple columns on blogger post:

1. Go to Dashboard
2. Click Design
3. Click Edit HTML
4. Find this code bellow

]]></b:skin>

5. Copy the code bellow and paste above the above code on step 4

#column { margin : auto; background-color :#EDE0AF; width : 620 px; height : auto; padding : 20 px; -webkit-column-count : 3; -moz-column-count : 3; -webkit-column-gap : 30 px; -moz-column-gap : 30 px; -webkit-column-width : 180 px; -moz-column-width : 180 px; -webkit-column-rule : 2px dotted black; -moz-column-rule : 2px dotted black; }

6. Go to posting
7. Click Edit HTML
8. Then write your article inside div tag. See the example bellow.
   

   <div id="column"> put your article here </div>

9. Publish your post and see the result

Here is an example how it will look like;

At vix tacimates mediocritatem, ea est minimum torquatos, sit vero expetenda et. Pri cetero nostrud ceteros ut, cum ei sensibus recteque, persius senserit ne quo. Duo magna adipisci ne. Cu vim modus etiam constituam. Est in minim denique eleifend, scaevola theophrastus ne nam.

Sed prodesset efficiendi an. Sed solet graeci periculis ut, fugit commodo reprimique eu vix, te est quidam assentior efficiantur. Apeirian argumentum eu has, nec suas explicari no. Ut rebum tacimates vel, soleat lucilius vituperatoribus qui cu, te his diam puto. Id odio maluisset usu, has simul eirmod option at.

Vix te esse possim assueverit, no maiestatis adolescens mea. Vel hinc accusata ne, nam ex ferri deseruisse. Ferri percipitur has in, eu malorum fierent delicatissimi mei. Mei iudicabit mediocritatem te, est blandit instructior te. Tempor cotidieque ad has, id has diam dicta euismod. Est te eruditi definitiones interpretaris.

Ei ridens principes sed, fabulas eleifend definitionem his cu. Ex pri graeci aperiam, aeterno vivendum neglegentur nec ad, te sed cibo legere regione. Ei duo quas exerci, pro agam argumentum scripserit ad, ne nec explicari definiebas. In eius inimicus conceptam pri. Cu vis prompta alterum neglegentur, ei sea dicat placerat vivendum.

Note :

• if you want to change numbers of column just change the number font  colored in brown.
• if you want to change the column gap just change the font  colored in blue.
• if you want to change the column rule just change the  font colored in red.
• if you want this multiple column to be compatible with many browser use the w3c standard. See the example bellow.

For example

-webkit-column-rule : 2px dotted black; 

-moz-column-rule : 2px dotted black;   

column-rule : 2px dotted black;    this is w3c standard