Two column list.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Two column list.

Post 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.
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

Re: Two column list.

Post 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.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Re: Two column list.

Post by JellyFish »

Thank you very much, this is perfect.

Exactly what I was looking for. I appreciate it!
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

Re: Two column list.

Post 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>
 
Post Reply