Get help. Give help. A Web Design and Development Community.

How to Make Multiple Columns

  • Anonymous
    # April 15, 2013 at 8:32 am

    How to make multiple column like newspaper using css3?

    # April 15, 2013 at 8:40 am

    This is one simple way to do it.


    # April 15, 2013 at 9:45 am

    You can use the CSS3 multicolumn layout:

    Very limited support though:

    # April 16, 2013 at 10:27 am

    Chris made a video on this a while back, but he makes an entire grid system.

    # April 16, 2013 at 11:26 am

    I’ve been experimenting in Codepen.

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

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

    # April 16, 2013 at 12:01 pm

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

    # April 16, 2013 at 12:10 pm


    Thanks…so I did. Fixed

    # April 16, 2013 at 12:20 pm

    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

    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

    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

    Hmmm….must be a Codepen issue then.

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

You must be logged in to reply to this topic.

We have a pretty good* newsletter.