CODEWITHSUNDEEP
css
user366312
user366312

Reputation: 16988

Newspaper-column in CSS

Is it possible to have a css newspaper-column layout arranged such a way that, any number of columns can be added and they will be continuously added to the right of the existing columns.

My thought is like this: I would just add a new div and a new column will be added to the right and so on.

If yes, how?

Here I found a 4-column newspaper layout. But column-heights are not same. I need a way so that, no matter how long the text is, they would be stipulated to a certain height.

Is it possible in CSS?

Upvotes: 5

Views: 3376

Answers (4)

suigeneris
suigeneris

Reputation: 117

CSS3 provides a way of turning any HTML node's content into any number of columns. There are properties for controlling the number of columns as well as their width, relative height ("fill," or how the content is divided across the existing columns), gutter between columns, "rule" (dividing line or border), etc.

As a starting point, see the w3schools.com CSS3 Multiple Columns reference page.

However, as usual, IE alone among widely used browsers does not support the column- CSS3 properties.

One cross-browser solution is the Columnizer jQuery Plugin.

Upvotes: 1

bguiz
bguiz

Reputation: 28617

I think your needs are best served using an existing CSS framework, rather than coding it yourself from scratch, since it is really tricky business plus apallingly hard to get to work across all browsers (since some of them are not standards compliant)

Anyhow, for newspaper columns, I think there's one out there that fits the bill, 960 Grid System. It comes with 12 & 16 column "grids", with the gutters and paddings all worked out, and so long as the number of columns you intend to use is a factor of 12 or 16, it can handle it.

Upvotes: 3

Aaron Digulla
Aaron Digulla

Reputation: 328724

With pure CSS, it's very hard to assign several divs the same height unless that height is static. You can use ugly hacks but that will only get you so far.

For real columns, use tables, that's what they are for. Tables are valid HTML constructs, it's just that you shouldn't use them as your only layout tool. But when tables work, use tables.

Upvotes: 1

Treby
Treby

Reputation: 1320

you can set the height of the column using CSS, but adding a column automatically its a programming stuff using other web programming languages.

Upvotes: 0

Related Questions