SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru XraySierra's Avatar
    Join Date
    Jan 2002
    Location
    Ontario, Canada
    Posts
    850
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floating Columns beside higher element

    I'm trying to get a css layout that has equal height columns. I've put together this demo on JSFiddle - http://jsfiddle.net/WebDevDude/5hYpk/2/

    In a case where a column is higher then it's siblings, I want the other columns to float beside. So in my demo case, column 3 and 4 should float beside column 2 on the left.

    I also can't assume that column 2 is going to be the tallest, it might be column 3, 4, or even 8. Does any CSS guru have the solution?
    Chris Blackwell - my blog and ramblings
    Comicville - Daily News and Comic Reviews

    "web development is what I love...so that's what I do"


  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,813
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Float depending on element height? You may need to rely on JS

    Even then, the problem there is WIDTH, and SOURCE ORDER. No matter what, a floated element cannot be higher than an element that precedes it in the source order. At most it can float ALL ELEMENTS beside each other, but for that all elements would need to fit withing the width of the container.

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2006
    Location
    Windsor, Berkshire
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by XraySierra View Post
    I'm trying to get a css layout that has equal height columns. I've put together this demo on JSFiddle - http://jsfiddle.net/WebDevDude/5hYpk/2/

    In a case where a column is higher then it's siblings, I want the other columns to float beside. So in my demo case, column 3 and 4 should float beside column 2 on the left.

    I also can't assume that column 2 is going to be the tallest, it might be column 3, 4, or even 8. Does any CSS guru have the solution?
    I think the best way to "hack" this is to use a background image - a term which was defined on A list apart as "faux columns" http://www.alistapart.com/articles/fauxcolumns/
    Check out my new blog - and let me know if you have any content suggestions (HTML5, CSS3, jQuery tutorials) - http://www.display-nun.co.uk


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
  •