Unordered List like Table

HTML & CSS
1

Hey guys,

I have a tricky problem. I have an unordered list which I want to make look like a table.

I have all the floating, align, etc. done already. The only thing I’m stuck on is how to make it so each “row” look like they have the same height, even if they have uneven heights.

Any ideas?

Thanks.

2

Probably by inserting another “row” of li between two “rows” of li, to make it act like a top/bottom “border” and spacer, giving guidance for the next “row”.

3

Hmmm, not sure how they would really work. My table is 3 columns wide, so that seems like a lot of empty lis…

4

Hmmm, ul can only take li as a direct descendant, so I guess you’re stuck with it.

One li acting like an empty “row”, to make the next “row” start from the same point doesn’t seem to me like much :slight_smile:

If you have “rows” of li, that means you’re floating/inline/inline-block them. The one between “rows” will just have to behave like a normal li: block.

5

Well, right now every x-th number of them is given a class which clears the float, causing it to create each new row.

The problem is when I have lis that aren’t the same height in the same row. They have alternating backgrounds, so the background shows up weird when they are uneven.

6

You need another level of nesting.

Right now you have:


ul
 --li li li
 --li li li

and you need


ul
  --li
      --ul
         --li li li
  --li
     --ul
        --li li li

but me guessing and you revealing step by step isn’t really helping. You should provide a test case.

7

Here is the site:
http://onecamperonetree.org/

It’s down at the bottom. I wound up using Javascript to solve the problem, so you’ll have to disable Javascript to see the problem. (though I’d still like a CSS-only method).

Thanks for the help.

8

Nah, I guess it wouldn’t work, there are already too many <ul>s and <li>s there.

I guess a real table would be better.

You design contradicts its self. You will always have three cols, so floating it’s not really needed.

You apply display:table to the main ul, for no reason: you should use it ONLY when you apply a related child display table property to child elements in it, like display:table-cell for <li>s.

Given the fixed layout, I guess a method would be the reverse of what I was “blindly” suggested: breaking the main ul in shorter <ul>s, having three <li>s each.

Or, better yet, use a real table :slight_smile: The mark up and solutions are too complicated already only to simulate a perfectly healthy existing element.

The main issue here is: the lack of a parent wrapper element that will extend to the height of its tallest element, having the background colour different every other “row”. In your case, only ul or li could became a “row”. That means further complicating the mark up for wrong reasons.

9

Doh, the display:table is there for no reason… it got left in while I was testing stuff. Thanks for pointing that out. -removes-

I know that I don’t want to complicate the markup (which is why I went with a JS solution). However, semantically the information is not tabular, but a list, so I definitely don’t want to use a table.

I considered breaking each one into a set of three, however that would also add unnecessary markup and also break the semantics of it being one unified, related list.

I do need the float in order to be able to clear the float every few elements and drop it down a row (without the drop-down there is a chance it won’t line up perfectly in all browsers without having to use browser-specific hacks).

I guess my JS solution is the best for now. If they don’t have JS enabled it’s not the end of the world, they just see them slightly unaligned.

Thanks for the help. =)