How do I format HTML into two columns similar to how MS Word does it?

In Microsoft Word there is an option where you can separate the text in two columns as follows:

The content has images and lists. All the content needs to continue normally as in the image. I've tried doing it with CSS3 but manually not dynamically (because I will have to load the content and then make operations to re-order the elements but I'm not sure if it will work):

http://joseadrian.com/stackoverflow/columns.php

Is there 开发者_如何学运维a way to do that with HTML (5) + JavaScript + CSS (3)? If so... creating a file with PHP giving it that structure will work?

CSS isn't smart enough to make decisions like "when this column, which is 600px high is full, wrap the text into the next column". You'll need to do this using JavaScript.

see: http://dancameron.org/code/splitting-content-into-two-columns-e-g-word-wrap-with-php-or-css-javascript