flow 2 columns of text automatically with CSS

Question

I have the code similar to the following:

<p>This is paragraph 1. Lorem ipsum ... </p> <p>This is paragraph 2. Lorem ipsum ... </p> <p>This is paragraph 3. Lorem ipsum ... </p> <p>This is paragraph 4. Lorem ipsum ... </p> <p>This is paragraph 5. Lorem ipsum ... </p> <p>This is paragraph 6. Lorem ipsum ... </p> 

I'd like to, without markup if possible, cause this text to flow into two columns (1-3 on the left, 4-6 on the right). The reason for my hesitation to add a column using a <div> is that this text is entered by the client via a WYSIWYG editor, so any elements I inject are likely to be killed later or inexplicably.

Answer 1

Use CSS3

.container {    -webkit-column-count: 2;       -moz-column-count: 2;            column-count: 2;     -webkit-column-gap: 20px;       -moz-column-gap: 20px;            column-gap: 20px; } 

---

Browser Support

• Chrome 4.0+ (-webkit-)
• IE 10.0+
• Firefox 2.0+ (-moz-)
• Safari 3.1+ (-webkit-)
• Opera 15.0+ (-webkit-)