Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Re – Arrange default column order (css3 columns)

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #43890
    Ilya
    Member

    I’m working on a 3 column layout for my page, something similar to pinterest.

    Here is the demo: http://codepen.io/IlyaDaderko/pen/ewCqu

    The issue is that at the moment columns display in the following order:

    1 3 5

    2 4 6

    Where as I would like them to display like this:

    1 2 3

    4 5 6

    Is that achievable? Maybe I can use something else instead of columns? (However I would not like to use things like big jQuery libraries for this, small js fix is appreciated tho)

    #130676
    Paulie_D
    Member

    Not much you can do about that if you are determined to use column-count because that’s te way it’s supposed to work.

    It’s not really necessary though.

    You can create a column layout using floats or inline-block or table-like styling.

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

    #130677
    Ilya
    Member

    I tried using floats, but the issue is that height of each element varies, and it just messes up with floats, however column usage seems to have fixed that issue, but created another… Might have to look into some jQuery libraries for this ;/

    #130678
    Paulie_D
    Member

    Masonry.js might be your solution.

    #130679
    croydon86
    Participant

    Few options…

    1. Use floats with fixed height/min-height, although not ideal with dynamic data

    2. Use inline-block – New line will be on a straight horizontal line, no issue like you get with floats, however not sure if you prefer them to be on a straight line, or like how you have here.

    With one of these options, you can then use values like left:200px and left: -200px to reshuffle the layout.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.