Column basics

Back to the index.

This page tests the basic column-width and column-count properties as well as prefixes.

column-width

These test cases all have the following, with the relevant prefixes:

column-width: 10em;

Normal test

It’s not often that you have to write a completely useless text that goes on for lines and lines. Still, I’d love to take up the challenge and see how quickly I can bore you. In the break tests we’ll be going to lengths to avoid a column break in this paragraph.

Heading

This is the second paragraph. We’ll try to break columns just before or after it.

Finally, in the third paragraph we continue our leisurely discussion of nothing in particular, so that we can see how the columns behave when text goes on and on and on.

-webkit- test

It’s not often that you have to write a completely useless text that goes on for lines and lines. Still, I’d love to take up the challenge and see how quickly I can bore you. In the break tests we’ll be going to lengths to avoid a column break in this paragraph.

Heading

This is the second paragraph. We’ll try to break columns just before or after it.

Finally, in the third paragraph we continue our leisurely discussion of nothing in particular, so that we can see how the columns behave when text goes on and on and on.

-moz- test

It’s not often that you have to write a completely useless text that goes on for lines and lines. Still, I’d love to take up the challenge and see how quickly I can bore you. In the break tests we’ll be going to lengths to avoid a column break in this paragraph.

Heading

This is the second paragraph. We’ll try to break columns just before or after it.

Finally, in the third paragraph we continue our leisurely discussion of nothing in particular, so that we can see how the columns behave when text goes on and on and on.

-ms- test

It’s not often that you have to write a completely useless text that goes on for lines and lines. Still, I’d love to take up the challenge and see how quickly I can bore you. In the break tests we’ll be going to lengths to avoid a column break in this paragraph.

Heading

This is the second paragraph. We’ll try to break columns just before or after it.

Finally, in the third paragraph we continue our leisurely discussion of nothing in particular, so that we can see how the columns behave when text goes on and on and on.

-o- test

It’s not often that you have to write a completely useless text that goes on for lines and lines. Still, I’d love to take up the challenge and see how quickly I can bore you. In the break tests we’ll be going to lengths to avoid a column break in this paragraph.

Heading

This is the second paragraph. We’ll try to break columns just before or after it.

Finally, in the third paragraph we continue our leisurely discussion of nothing in particular, so that we can see how the columns behave when text goes on and on and on.

column-count

These test cases all have the following, with the relevant prefixes:

column-count: 4;

Normal test

It’s not often that you have to write a completely useless text that goes on for lines and lines. Still, I’d love to take up the challenge and see how quickly I can bore you. In the break tests we’ll be going to lengths to avoid a column break in this paragraph.

Heading

This is the second paragraph. We’ll try to break columns just before or after it.

Finally, in the third paragraph we continue our leisurely discussion of nothing in particular, so that we can see how the columns behave when text goes on and on and on.

-webkit- test

It’s not often that you have to write a completely useless text that goes on for lines and lines. Still, I’d love to take up the challenge and see how quickly I can bore you. In the break tests we’ll be going to lengths to avoid a column break in this paragraph.

Heading

This is the second paragraph. We’ll try to break columns just before or after it.

Finally, in the third paragraph we continue our leisurely discussion of nothing in particular, so that we can see how the columns behave when text goes on and on and on.

-moz- test

It’s not often that you have to write a completely useless text that goes on for lines and lines. Still, I’d love to take up the challenge and see how quickly I can bore you. In the break tests we’ll be going to lengths to avoid a column break in this paragraph.

Heading

This is the second paragraph. We’ll try to break columns just before or after it.

Finally, in the third paragraph we continue our leisurely discussion of nothing in particular, so that we can see how the columns behave when text goes on and on and on.

-ms- test

It’s not often that you have to write a completely useless text that goes on for lines and lines. Still, I’d love to take up the challenge and see how quickly I can bore you. In the break tests we’ll be going to lengths to avoid a column break in this paragraph.

Heading

This is the second paragraph. We’ll try to break columns just before or after it.

Finally, in the third paragraph we continue our leisurely discussion of nothing in particular, so that we can see how the columns behave when text goes on and on and on.

-o- test

It’s not often that you have to write a completely useless text that goes on for lines and lines. Still, I’d love to take up the challenge and see how quickly I can bore you. In the break tests we’ll be going to lengths to avoid a column break in this paragraph.

Heading

This is the second paragraph. We’ll try to break columns just before or after it.

Finally, in the third paragraph we continue our leisurely discussion of nothing in particular, so that we can see how the columns behave when text goes on and on and on.

Conflict

This test cases sees how browsers solve a conflict between width and count:

column-width: 10em;
column-count: 4;

All browsers opt to obey the width and discard the count. This example uses all prefixes.

Test

It’s not often that you have to write a completely useless text that goes on for lines and lines. Still, I’d love to take up the challenge and see how quickly I can bore you. In the break tests we’ll be going to lengths to avoid a column break in this paragraph.

Heading

This is the second paragraph. We’ll try to break columns just before or after it.

Finally, in the third paragraph we continue our leisurely discussion of nothing in particular, so that we can see how the columns behave when text goes on and on and on.