How to make text flow through 2 rows of 2 columns using css3?

Question

At the moment I have a div of size 1024px.

In this field are two CSS3 columns with text automatically transferred from one to another.

However, I want to limit the height of these two columns to 700px - as soon as they are full, I want 2 more columns with the same height to be displayed under them.

Is it possible?

Answer 1

OK It is perfectly possible to achieve what I think you are going to build. However, if you want to do it yourself, you will need a little more than just CSS3 styles. You will also need enough JavaScript.

Check out this jQuery plugin for Columnizer (it can do the job)

Here's an example site showing its results: http://welcome.totheinter.net/autocolumn/sample10.html

Answer 2

Update on this:

The Adobe CSS Regions suggestion mentioned by gimme5 looks great. Unfortunately, according to caniuse.com, there now seems to be very little browser support - it has been removed from current versions of Webkit.

There is a simpler sentence that can do the job you need: CSS A multi-line layout ( http://www.w3.org/TR/css3-multicol/ ), which seems to have wider browser support. I haven't tried it yet, but this might work for you without buying a bunch of Javascript.