Dynamic tabled content -> CSS

Am I approaching this wrong?

[brokaddr]

I'm in the process of giving my site a fluid CSS layout, it's coming along nicely.

However, I have a tabled list with content I can't seem to transform as easily as all of my other content:

<table>
 <tr>
 <td>Link 1</td>
 <td>Link 2</td>
 <td>Link 3</td>
 </tr>
 <tr>
 <td>Link 4</td>
 <td>Link 5</td>
 <td>Link 6</td>
 </tr>
 <tr>
 <td>Link 7</td>
 <td>Link 8</td>
 <td>Link 9</td>
 </tr>
</table>

The table content is 100% dynamic; 3 columns of a hundred or so links.

I have dug around the web for days, and even read numerous threads on this forum, I haven't seen any examples of someone achieving this with dynamic content.

So far, as close as I've gotten to solving this is, having to know the width of the column before-hand and giving it a fixed width. Obviously, with dynamic content, I want it to "look" like tables so it isn't possible to predict the width.
And because this is a fluid design, I want to be able to clear the elements, too.

Is what I'm trying to do, possible at this stage of CSS?

[lucy24]

Obviously, with dynamic content, I want it to "look" like tables so it isn't possible to predict the width.

Why do you want it to look like a table when it isn't a table? There's no inherent relationship between Link 1, Link 34 and Link 67 is there?

The multi-column model of CSS 3 is in fact exactly what you want.

Is what I'm trying to do, possible at this stage of CSS?

The problem isn't CSS, it's browsers. Real browsers will happily do columns if you throw in the appropriate vendor prefixes, -moz- and -webkit-. This will of course triple the size of each CSS declaration, so don't get too fancy.

But MSIE <10 (!) doesn't "do" columns. And, er, that wipes out about half the population of the planet :( Which is why one sometimes has to fall back on the Conditional Comment.

In any case you don't want {column-count}. You want a {column-width} expressed in ems. Allow a little extra-- anywhere from .5 to 2 em depending on how much text there is-- so you won't get a disaster if the user's version of your preferred font is a teeny bit wider.

Then, depending on how much horizontal space the user has got, the list can go to the appropriate number of columns.

Overall it will look like

<div class = "name-of-list-class">
<p>Link 1</p>
<p>Link 2</p>
<p>Link 3</p>
...
<p>Link 492</p>
<p>Link 493</p>
</div>

The html will also end up smaller. This is not always the case, so it's nice when it happens. If you really do want it to look like a table, with lines separating all the items, you can easily attach a border to each paragraph (your former table cells).

[brokaddr]

There's a relationship by each link belonging to the same category, they're alphabetized so the desired section of the site is easy to find. (think "parent" category -> "child" category)

I read a bit on CSS columns and that IE explicitly doesn't do them, so I stayed away from it; a large portion of my visitors still use IE.

I've tested the site in the latest version of IE and it's performing identical to Firefox & Chrome. (Primarily using floats for everything, including dynamic content); however, this particular section isn't working with the floats so I feel as though I hit a brick wall.

The CSS column option certainly looked as though it was the holy grail. :(

[lucy24]

There's a relationship by each link belonging to the same category, they're alphabetized so the desired section of the site is easy to find. (think "parent" category -> "child" category)

Oh, sure. But I meant: Is there a two-dimensional relationship like this

Link1a : Link1b : Link1c
Link2a : Link2b : Link2c
Link3a : Link3b : Link3c

If yes, it's a table. If the relationship only works in one dimension, it's a list.

CSS columns are definitely the long-term fix. But in the meantime, why not chop the list into three pieces of equal size and put each piece in a div set to {display: inline-block}. The three bits might come out to slightly different lengths, but you can make them pretty close. And all you'll need to do when you change the list is move the <div> dividers up and down. It's a lot less work than redoing a whole table each time. This is, ahem, assuming for the sake of discussion that you're in static hand-rolled html.

The structure is then

<div class = "overall-name-here">
<div class = "inner-div-name">
<p>Link 1</p>
<p>Link 2</p>
<p>Link 3</p>
...
<p>Link 33</p>
</div>
<div class = "inner-div-name">
<p>Link 34</p>
<p>Link 35</p>
...
<p>Link 66</p>
</div>
<div class = "inner-div-name">
<p>Link 67</p>
<p>Link 68</p>
...
<p>Link 99</p>
</div>
</div>

The outer div is set to the width you currently use for your table. The inner divs can be set to either 32% (as with em-widths, allow a little extra for insurance) or to some width in ems. em-widths are nice because then if there is room they'll display side by side and if not they'll go one after the other. I would set the outer div to {text-align: center} and the inner divs to {text-align: left}. That way if you end up with two and one, the separation will be visible:

With enough room

aaa eee iii
bbb fff jjj
ccc ggg kkk
ddd hhh lll

With not so much room

aaa eee
bbb fff
ccc ggg
ddd hhh
  iii
  jjj
  kkk
  lll

[brokaddr]

This looks promising, thank you.
Unfortunately, the td's are created through a while() statement. tr's are positioned/calculated so that every 3 td's, a </tr><td> is issued.

I am going to take a stab at mixing your examples into my code and see what happens. Perhaps breaking away from the 3 column tr's and switching to a list.
I have a feeling I could be at this for a while.

[lucy24]

Uh-oh. Is your list horizontal or vertical? I'd assumed the table looks like

a e i
b f j
c g k
d h l

Is it currently set up as

a b c
d e f
g h i
j k l

?

Then it will come out looking different but this should not be a problem. Human users expect to find things alphabetized in consecutive columns, like in the phone book. Personally I get confused when it's arranged the other way.

The good part is that if it's already coded to run horizontally, it should be a snap to change from a table to a multiple-div layout. You're processing the same information in the same order. Only now instead of going by sets of three, you start out by dividing the total list length by three. Ceiling, not floor: you want the longer columns to be first. If it's stored in any kind of array you already know how many there are. And then put in a </div> break every time you hit this number.

Except that, urk, I just checked and inline-block doesn't happen in MSIE <8. caniuse dot com says that leaves about 4.3% unsupported. I hope they're expendable ;)

Only supported in IE6 and IE7 on elements with a display of "inline" by default. Alternative properties are available to provide complete cross-browser support.

There's a link, but it talks about Firefox 2, Safari 3 and Opera (not numbered yet). Sigh.

[brokaddr]

Right now it's:
a b c

but if I had to, I could do:
a d
b e
c f

I switched it that way simply due to my personal preference. If it would make my life easier, I'd change back!

Only now instead of going by sets of three, you start out by dividing the total list length by three. Ceiling, not floor: you want the longer columns to be first. If it's stored in any kind of array you already know how many there are.

A lightbulb just went off! I think I fully understand the sample code.
I will put this into execution after I sleep, I've been working on this layout all day.

Except that, urk, I just checked and inline-block doesn't happen in MSIE <8. caniuse dot com says that leaves about 4.3% unsupported. I hope they're expendable

That blasted IE8! Ironically, I just started a new topic about an unrelated issue I just encountered with IE8 and my CSS layout.
Hopefully, if a band-aid exists, it could be employed to your table-less layout ;)

Thanks so much for the tips!

[lucy24]

That blasted IE8!

Fortunately in this case it's <8 not <=8. Big difference. And one good thing you can say about Chrome is that it means about 1/3 of the population is using a real browser even if they don't know what a browser is.

[brokaddr]

I read that Facebook & Google don't support IE 7 or below anymore. If those companies turn those people away, I don't see any reason I can't get away with doing so, too.

8 however, I know is still used by a lot of people visiting my site. I will have to tinker around with this and see if I can come up with a middle-of-the-road solution.
I'll keep you posted :)

[brokaddr]

Got it to work, and it works in IE7 (according to IE10 Compatibility View) thanks to float!

Here's my div:

min-height:2em;
vertical-align:middle;
float:left;
margin:15px;
text-align:center;
margin-top:auto;
margin-bottom:auto;

Thank you for giving me the inspiration to give this a shot, lucy24! You've been a huge help. :)

My only qualm now is to figure out how to center the "table". The outer-lying margin-left:auto;margin-right:auto aren't working -- width:100%; doesn't seem to do the trick, either.

After working on a php/css combo, centering should be the easiest feat of the night!
Any suggestions?

[lucy24]

To center a div you need two things: "margin-left: auto" AND "width: something-less-than-100%". But you don't know exactly what the width is, which makes it tricky. Could you put the site on hold until around 2017 when all browsers will support derived values like "80% minus two em"?

Didn't think so.

You've got two nested divs now, right? One for the overall list, one for its three side-by-side pseudo-columns.

It ought to work if you set the outer div to {text-align: center} and the inner div to {text-align: left}. Matter of fact, I suggested it at one point, though I was thinking about a different aspect of display. What it means here is that the list as a whole is centered, but the text in each of its columns is left-aligned.

In this rare and special case it might not be calamitous if you simply centered everything. That may even be what your table looked like. But if it looks wrong, it looks wrong and that's all there is to it.

You may find it useful to put visible borders on your divs: one color for the outer one and a different color for the inner one. Or give them different background colors, like #DDD and #EEF. Anything that won't hurt your eyes but makes it easier to see while you're hammering out the code. Maybe even a third border or background for the separate list items if those are paragraphs. This is not for the live site, just for testing.

[brokaddr]

Eesh, there's so much inconsistency between IE and everyone else with stylesheets.
Setting the margins to 5% seems to have done the trick!
However, my outer div doesn't seem to 'surround' the columns, it put what looks to be a bar right above..

<div style="border:10px solid #c0c0c0;"><div class="column">
...columns....
</div>
</div>

But the centering works anyway (Firefox/IE7)-- but how odd!
It's a short code so there's no way for me to have slipped an accidental one in there.
Plus, an extra div would break the entire layout.

[drhowarddrfine]

If you want to see how things are supposed to work, look at any browser but IE. Standard web developer's mantra.

[brokaddr]

I use Firefox by default, but a high percentage of the sites visitors are on IE. To make things look good in IE, it seems one has to jump through hoops and add extra "hacks" to otherwise working code.