SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Location
    Ljubljana
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    elements in horizontal blocks

    Hello,

    I have X number of elements (unordered list - ul) in a div with a fixed height.

    I've been wondering how (if) it's possible to position elements in vertical order like so:
    Code:
    -element 1 -element 4 -element 7
    -element 2 -element 5 -element 8
    -element 3 -element 6
    Is it possible to achieve that without setting clear on last parameter in the block / row?

    Currently I have set float: left and fixed width on li attributes.

    Thanks for help
    Get RankTrackr 2.0: Rank Tracker | PopStrap

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    A solution for this was established in a SitePoint CSS Quiz not so long ago, which might be of interest:

    http://www.sitepoint.com/forums/show...23#post4438623

  3. #3
    SitePoint Addict
    Join Date
    May 2006
    Location
    Ljubljana
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    A solution for this was established in a SitePoint CSS Quiz not so long ago, which might be of interest:

    http://www.sitepoint.com/forums/show...23#post4438623
    This is similar but not what I want to do. The difference is that I want elements to move in the next column when the current column is full, depending on the height or even better - if I could limit limit the number of elements in a column with css.
    Get RankTrackr 2.0: Rank Tracker | PopStrap

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    You'd have to use the css3 multi column module but support is sparse and still only by vendor extension.

    There is no other automatic way to do it.

  5. #5
    SitePoint Addict
    Join Date
    May 2006
    Location
    Ljubljana
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So no automatic way to do it with css2?
    Get RankTrackr 2.0: Rank Tracker | PopStrap

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by l2u View Post
    So no automatic way to do it with css2?
    Unfortunately there doesn't seem to be a way to do what you want and the quiz Ralph linked to was the closest we got but is not much use in the real world as it's a little contrived.

  7. #7
    SitePoint Member PaulPov's Avatar
    Join Date
    Dec 2011
    Location
    Saint-Petersburg, Russia
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    About automatic ways - I know it's not the most efficient way, but I would use a php script for that - so that it would make html on the go. I would devide the holder into three columns and php would know if one of them is already full and it should start a new one.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •