Forums

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

Home Forums CSS CSS3 Columns: load Left to Right instead of Top to Bottom?

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #45115
    Rugg
    Participant

    Hi,

    Curious if anyone knows a method for changing the direction that content loads in CSS3 Columns.

    By default the content is stacked vertically within each column and loads from **top to bottom**… as apposed to floated columns which load **left to right**.

    **Example (CSS3 Columns):**

    1 | 4 | 7

    2 | 5 | 8

    3 | 6 | 9

    **Example (floated):**

    1 | 2 | 3

    4 | 5 | 6

    7 | 8 | 9

    Is there a way to load the CSS3 column content left to right instead of top to bottom? is there a jQuery fix for this? Any suggestions are appreciated. Thanks

    #137456
    Paulie_D
    Member

    I’m not entirely sure what you are after but…Flexbox?

    Frankly, it doesn’t sound as though you want columns at all.

    #137458
    Paulie_D
    Member

    Yes I know that but if you don’t want them to act like columns then why are you using that property?

    Offhand it sounds to me as if you are after a ‘flow’ property from one row to another and so on.

    http://html.adobe.com/webplatform/layout/regions/

    #137467
    Kitty Giraudel
    Participant

    > By default, all content that is structured using CSS3 Multi Columns will load vertically from top to bottom until the current column is full…and then move horizontally to fill the next column…

    Yes, this is what “column” means. I’ll have to agree with Paulie: you don’t seem to need any column. Use float/inline-blocks.

    #137473
    Paulie_D
    Member

    If they are images, does the order really matter?

    I think js is the answer.

    #137477
    Paulie_D
    Member

    Yeah but you keep talking in terms of columns which clearly aren’t appropriate here.

    Load order is the same (essentially) as source order. If you don’t use columns (see above) then that solves the loading issue.

    #204355
    cristianav
    Participant

    @rugg

    what did you use to create this type of grid?
    thanks

    #204395
    dauruk0512
    Participant

    I have been through in this issue, yes coloumn in css3 give users not good reading article.

    so the better idea using this plugin http://welcome.totheinter.net/columnizer-jquery-plugin/ hope this help you, nowdays newspaper style is mode on now.

    Hope this help you :D

    #204402
    cristianav
    Participant

    Hi,

    Columnizer plugin is top to bottom solution. I am looking for a left to right solution, with variable heights, like masonry.

    I was just asking if someone found a better solution for it.

    Thank you!

    #204442
    dauruk0512
    Participant

    What did you asking ? can you describe in dummy images ?

    Freddy

    #204478
    cristianav
    Participant

    I want something like http://tympanus.net/Development/GridLoadingEffects/index2.html
    This is based on masonry jqeury plugin, but it is not working OK when you load images dynamically from the server. It is working well when you have a predefined list of images.

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