Question

I have a div divided into three columns using CSS3

.div {column-count: 3;}

This div contains a string of text which fills some part of the columns.

Can anyone think of a way to block out one or more of these columns?

So for example the first column is blocked and the text begins at the top of the second column.

The height of the div is unknown and changes.

The div is also contenteditable.

Answer 1

The way I ended up doing it was if I wanted to block the left column I would apply padding-left equal to one column’s width, take down the width equal to one column’s width and change column-count to 2.

If I wanted to block the middle column I would change column-count to 2 and set the column-gap equal to the width of one column plus the existing column gap.