SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,634
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    Unequal height boxes in columns that fill available space?

    Apparently I've never done this before because I can't figure out how. Here is what I'm after. Float and inline-block create equal height columns. But I need them to fill any available space. My guess is display table is my answer. Care to show me how? There is always going to be rows of three and the boxes will always be equal width. Thanks!

    The html looks like this...

    Code HTML4Strict:
    <ul>
    	<li></li>
    	<li></li>
    </ul>
    <ul>
    	<li></li>
    	<li></li>
    	<li></li>
    	<li></li>
    </ul>
    <ul>
            <li></li>
    	<li></li>
    </ul>
    <ul>
    	<li></li>
    	<li></li>
    </ul>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Hi Eric,

    Can you clarify a little as the drawing you showed above is exactly what you would get should you do nothing special at all. When you say "fill available space" do you mean vertically or horizontally?

    Your drawing just looks like what you would get with three floats and doing nothing special at all so I must be missing the point

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,634
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    huh. Because when I float them and clear the 4th ul they drop in line as they should but the 4th ul goes no higher than the tallest ul above it. or using inline-block does the same thing. My attempts end up exactly like gary turners seen here http://gtwebdev.com/workshop/layout/...ck-gallery.php. But I want them to move up and fill any space.

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,634
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    O and vertically fill the space. If I wanted to pollute the html I could throw some divs in there and make columns. Maybe I'm making this harder than it has to be. But the uls are block with widths and floated left currently. Every fourth ul is cleared left. Currently the rows of uls appear to all be equal in height with different li heights (so blank white space). Don't want blank white space or equal height columns. I just want every 4th ul to float over to the left and automagically move up or down to butt up nicely to the bottom the other uls. Lol I hope that explains it.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,742
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    4th ul goes no higher than the tallest ul above it
    a float cannot display higher than the previous element ( floated or not) in the source code. You may have to rethink how you have ordered your code or use wrappers to achieve this.

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,634
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Well I know what a float cannot do. I am looking for the CAN solution. Here is my simple test page showing how I do NOT want it. http://www.visibilityinherit.com/projects/test.php. Here is an image showing how I DO want it. http://www.visibilityinherit.com/projects/boxes.jpg. There has to be a way without resorting to blocking the ul's in divs

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Ok, I see what you mean now I thought you just had three floated columns with content stacked in each column which is exactly what the drawing looks like.

    You want a series of independent elements to line up as per your drawing but I don't think that's at all possible. I remember years ago trying something similar for two columns of just right and left floats and found it impossible. It may be possible with some of the new css3 column modules but I haven't played around with them yet as they keep changing the specs.

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,634
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Ok, I see what you mean now I thought you just had three floated columns with content stacked in each column which is exactly what the drawing looks like.

    You want a series of independent elements to line up as per your drawing but I don't think that's at all possible. I remember years ago trying something similar for two columns of just right and left floats and found it impossible. It may be possible with some of the new css3 column modules but I haven't played around with them yet as they keep changing the specs.
    Thanks Paul. Wow who would have known something so simple couldnt be done. Thats weird. So what would you suggest then? Is wrapping them in 3 divs for the columns going to be the best way? Thanks

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Thanks Paul. Wow who would have known something so simple couldnt be done. Thats weird. So what would you suggest then? Is wrapping them in 3 divs for the columns going to be the best way? Thanks
    Yes just three floated columns with content stacked in each column as required. I can't see any other way to do it.

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,634
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul. I'm going to try this and that first before i give up. http://masonry.desandro.com/demos/ba...le-column.html and http://kmsm.ca/2010/an-almost-comple...olumn-layouts/

  11. #11
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,634
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Tried the masonary plugin. It worked well but displayed a bit of fouc and seemed to slow down my site load quite a bit. And I considered messing with css3 columns but as soon as I read even ie9 doesn't support them I was out. So three divs it is. A bit of matanance will be involved to maintain somewhat equal height columns though as new links are added.


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
  •