How to line up items of varied length in a resizable space in CSS?

Question

I'd like to line up items approximately like this:

item1      item2           i3           longitemname
i4         longitemname2   anotheritem  i5

Basically items of varying length arranged in a table like structure. The tricky part is the container for these can vary in size and I'd like to fit as many as I can in each row - in other words, I won't know beforehand how many items fit in a line, and if the page is resized the items should re-flow themselves to accommodate. Eg. initially 10 items could fit on each line, but on resize it could be reduced to 5.

I don't think I can use an html table since I don't know the number of columns (since I don't know how many will fit on a line). I can use css to float them, but since they're of varying size they won't line up.

So far the only thing I can think of is to use javascript to get the size of largest item, set the size of all items to that size, and float everything left.

Any better suggestions?

Answer 1

You could use block level elements floated left, but you will need some javascript to check the sizes, find the largest one, and set them all to that width.

EDIT: Just read the second half of your post, and saw that you suggested just this fix. Count this post as +1 for your current idea :)

Answer 2

You would actually need to calculate the maxWidth and the maxHeight and then go through with a resize function in Javascript after the page loads. I had to do this for a prior project and one of the browsers (FF?) will snag/offset the ones underneath if the height of the divs vary.

Answer 3

Well, could you just create a floated div for each 'item', and loop through its properties and use linebreaks? Then when you finish looping over the properties, close the div and start a new one? That way they will be like columns and just float next to each other. If the window is small, they'll drop down to the next 'line' and when resized, will float back up to the right (which is really the left :-)

Answer 4

You could float a couple of unordered lists, like this:

<ul style="float: left;">
    <li>Short</li>
    <li>Loooong</li>
    <li>Even longer</li>
</ul>
<ul style="float: left;">
    <li>Loooong</li>
    <li>Short</li>
    <li>...</li>
</ul>
<ul style="float: left;">
    <li>Semi long</li>
    <li>...</li>
    <li>Short</li>
</ul>

It would require you to do some calculations on how many list-items in how many lists should be shoved into the DOM, but this way - when you re-size the container which holds the lists - the lists will float to fit into that container.

Answer 5

This can be done using floated div's, calculating the max width, and setting all widths to the max. Here's jquery code to do it:

html:

<div class="item">something</div>
<div class="item">something else</div>

css:

div.item { float: left; }

jquery:

var max_width=0;
$('div.item').each( function() { if ($(this).width() > max_width) { max_width=$(this).width(); } } ).width(max_width);

Not too ugly but not too pretty either, I'm still open to better suggestions...

Answer 6

What happens when you get one item thats rediculously large and makes the rest look small? I would consider two solutions:

1. What you've already come up with involving a float:left; rule and jQuery, but with a max max_width as well or
2. Just decide on a preset width for all items before hand, based on what values you expect to be in there

Then add an overflow:hidden; rule so items that are longer don't scew the table-look. You could even change the jQuery function to trim items that are longer, adding an elipsis (...) to the end.

Answer 7

You could use the following with each column the same width.

You'll have a fixed column width, but the list will reflow itself automatically. I added a little bit of extra HTML but now it works in FF en IE.

html:

<ul class="ColumnBasedList">
  <li><span>Item1 2</span></li>
  <li><span>Item2 3</span></li>
  <li><span>Item3 5</span></li>
  <li><span>Item4 6</span></li>
  <li><span>Item5 7</span></li>
  <li><span>Item6 8</span></li>
</ul>

css:

.ColumnBasedList
{
    width: 80%;
    margin: 0;
    padding: 0;
}

.ColumnBasedList li
{
    list-style-type: none;
    display:inline;
}

.ColumnBasedList li span
{
    display: -moz-inline-block;
    display: inline-block;
    width: 20em;
    margin: 0.3em;
}