How to Make Multiple Columns - CSS-Tricks

This topic is empty.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
April 15, 2013 at 8:32 am #44130

Anonymous
Inactive

How to make multiple column like newspaper using css3?

April 15, 2013 at 8:40 am #131816

Blackhawkso
Member

This is one simple way to do it.

[http://cdpn.io/mEKdF](http://cdpn.io/mEKdF)

April 15, 2013 at 9:45 am #131829

Senff
Participant

You can use the CSS3 multicolumn layout: http://www.w3.org/TR/css3-multicol/

Very limited support though: http://caniuse.com/#feat=multicolumn

April 16, 2013 at 10:27 am #131966

pkos99
Member

Chris made a video on this a while back, but he makes an entire grid system.
https://css-tricks.com/video-screencasts/115-dont-overthink-it-grids/

April 16, 2013 at 11:26 am #131969

Paulie_D
Member

I’ve been experimenting in Codepen.

It’s all unprefixed and as @Senff said….has very limited support.

http://codepen.io/Paulie-D/pen/khdJH

Odd top-margin bug on the contents which I’ve had to ‘hack’…any thoughts?

April 16, 2013 at 12:01 pm #131973

rodolpheb
Participant

Great example @Paulie_D.
I think you missed “column” in front of “gap”.

April 16, 2013 at 12:10 pm #131975

Paulie_D
Member

>>@rodolpheb

Thanks…so I did. Fixed

April 16, 2013 at 12:20 pm #104273

rodolpheb
Participant

Actually the universal selector works (just not on Codepen). I’ve tested it on Safari, Chrome, Opera, Firefox (Mac)

April 16, 2013 at 12:59 pm #131981

Paulie_D
Member

Oh…I know it works **generally** but if I remove the margin-top: 0 from the p tag there is a gap at the top of the first column even with the the universal margin set to 0.

April 16, 2013 at 1:13 pm #131983

rodolpheb
Participant

On your example:
– with the universal margin set to 0,
– and with the margin-top: 0 from the p tag removed
it works.
Try without using Codepen. :)

April 16, 2013 at 1:15 pm #131985

Paulie_D
Member

Hmmm….must be a Codepen issue then.
Author

Posts