Unequal height boxes in columns that fill available space?

HTML & CSS
1

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…

<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

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

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/inline-block-gallery.php. But I want them to move up and fill any space.

4

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

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

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

Ok, I see what you mean now :slight_smile: 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

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 :slight_smile:

9

Yes just three floated columns with content stacked in each column as required. I can’t see any other way to do it.

10

Thanks Paul. I’m going to try this and that first before i give up. http://masonry.desandro.com/demos/basic-single-column.html and http://kmsm.ca/2010/an-almost-complete-guide-to-css3-multi-column-layouts/

11

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.