Page 1 of 1

Two column list.

Posted: Mon Jul 21, 2008 8:25 pm
by JellyFish
Hey, I'm looking for a more standards, css based way of making a list that has two columns. This list is for a table of contents and the only way I can think of doing two columns is using a table. For an example:

chapter one_________________________chapter five
chapter two_________________________chapter six
chapter three________________________chapter seven
chapter four_________________________chapter eight

I don't know if anyone is doing stuff like this or how.

Thanks.

Re: Two column list.

Posted: Mon Jul 21, 2008 8:49 pm
by Zoxive
I'm not quite sure what your looking for. But the following is pretty simple.

Code: Select all

     <div class="column">
      <ul>
        <li>one</li>
        <li>two</li>
      </ul>
    </div>
    <div class="column">
      <ul>
        <li>three</li>
        <li>four</li>
      </ul>
    </div>
    <div class="clear"></div>
    <style>
      .column{
        width:150px;
        float:left;
      }
      .clear{
        clear:both;
      }
    </style>
 
Normally when the data is tabular, a (<)table(>) is the best way.

Re: Two column list.

Posted: Mon Jul 21, 2008 10:36 pm
by JellyFish
Thank you very much, this is perfect.

Exactly what I was looking for. I appreciate it!

Re: Two column list.

Posted: Tue Jul 22, 2008 12:08 am
by Zoxive
You can even put a div around them, and use percentages. For set widths and etc..

Code: Select all

    <div class="holder">
     <div class="column">
      <ul>
        <li>one</li>
        <li>two</li>
      </ul>
    </div>
    <div class="column">
      <ul>
        <li>three</li>
        <li>four</li>
      </ul>
    </div>
    <div class="clear"></div>
    </div>
    <style>
      .column{
        width:50%; /* Change to 33.33% for 3 columns.. 25% for four.. etc */
        float:left;
      }
      .holder{
        width:250px; /* width of box holding the columns */
      }
      .clear{
        clear:both;
      }
    </style>