CODEWITHSUNDEEP
javascriptjquerycss
Michael Bates
Michael Bates

Reputation: 1934

CSS3 Columns Block out specific column(s)

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.

Upvotes: 4

Views: 261

Answers (2)

Michael Bates
Michael Bates

Reputation: 1934

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.

Upvotes: 1

imbecile
imbecile

Reputation: 468

You could use Blueprint CSS. It's a framework that can be used to easily create complex multi-column layouts.

http://www.blueprintcss.org/

This link can help you get started: http://www.cssbakery.com/2012/06/using-blueprint-css-framework.html

Also, column-count works only in opera. For Firefox supports -moz-column-count, whereas Chrome and Safari support -webkit-column-count.

Godspeed.

Upvotes: 1

Related Questions