Using CSS to Format Two Columns of Links

Forum Moderators: not2easy

Message Too Old, No Replies

Using CSS to Format Two Columns of Links

Is there a way to do this?

myrrh

10:28 pm on Dec 23, 2008 (gmt 0)

I have a page with a list of text links alphabetically arranged in two columns. The alphabetical order is such that it starts at the top of the left column, goes down the left column, and then continues at the top of the right column and goes down it.

I am currently accomplishing this with a table, but when I add another link to the list, I have to redo much of the table.

Is there a way to do this with CSS so that all I need to do is insert the new link code in the proper alpha order and the columns will balance themselves out so they are the same length? I don't have php support.

swa66

12:25 am on Dec 24, 2008 (gmt 0)

In CSS 2 the answer is that any direct way is going to be still manual.

An alternative might be to to do left/right instead on top/down: in that case: yes we can balance the colums by e.g floating the elements (and even go further by e.g adding columns as the page gets wider)
If you do this, a title in the form of the letter etc can easily be added in between as well.

To go for it straightforward: CSS3 will have what it takes.
[w3.org...]

Both mozilla and webkit (ie. FF, safari, chrome etc.) already implement it under vendor specific tags such as:
-moz-column-width
-moz-column-count
-moz-column-gap
-moz-column-rule
-webkit-column-width
-webkit-column-count
-webkit-column-gap
-webkit-column-rule

If you find an alternate solution for browsers not yet on CSS3, you can start using these for the time being.

Now even if you have to balance it manually, it's going to be a *lot* easier if you use simple CSS vs. a nested table or such thing.

myrrh

12:51 am on Dec 24, 2008 (gmt 0)

Thank you, swa66.

Now even if you have to balance it manually, it's going to be a *lot* easier if you use simple CSS vs. a nested table or such thing.

I don't mind balancing manually if it is going to be easier to use CSS than tables. How would I do this - or could you point me to an example or tutorial?

myrrh

1:10 am on Jan 12, 2009 (gmt 0)

I thought I'd bring this to the top again and see if someone could kindly point out a source that explains how to use CSS in place of a two-column table for the purpose described above.

I searched the Web and a couple of books but could find nothing that applied to this particular situation.

swa66

6:09 am on Jan 14, 2009 (gmt 0)

To do it automated, but horizontally , not vertically:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head>
    <title>untitled</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      h1 {
        text-align:center;
      }
      h2 {
        clear:left;
        color: gray;
        padding-top: 20px;
      }
      p {
        width: 15em;
        float: left;
      }
    </style>
  </head>
  <body>
    <h1>index</h1>
    <h2>A</h2>
    <p>alpha</p>
    <p>alternate</p>
    <h2>B</h2>
    <p>believe</p>
    <p>best</p>
    <p>beta</p>
    <p>betray</p>
    <p>better</p>
    <p>bullet</p>
    <p>bully</p>
  </body>
</html>

Only tested in FF3, might not behave all that well in other browsers.

This adds columns based on the available width, if you seek just 2, set the width to 50%.

You can probably consider other elements than a <h2> and a <p> (e.g a <dl> might be far more appropriate)