Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Jan
    Jan is offline
    Regular Coder
    Join Date
    Jul 2002
    Location
    Finland
    Posts
    204
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Troubles with unordered list

    Hey!

    It's quite some time since I last posted here, but I've run into a slight problem. You see, I have this unordered list that I'd like to divide in two and align the second part beside the first part. They should form two columns with fixed widths. How would I - keeping in mind semantics - do this the best way? I've tried using extra div's, but I belive that there should be a more effective way, shouldn't there?

    Thanks for any help!


    ~Jan

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Two floated lists

    I think your best bet would be to create two separate lists. Since the ul element is block level by default, you should be able to float them next to eachother.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Fix the UL width to the sum of both column widths, and float all LI to the left.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title></title>
    
    <style type="text/css">
    #twocol {
      list-style-type: none;
      padding: 0;
      margin: 0;
      width: 240px;
    }
    #twocol li.col1 {
      background: red;
    }
    #twocol li {
      background: blue;
    }
    #twocol li {
      float: left;
      width: 100px;
      padding: 10px;
    }
    </style>
    </head>
    
    <body>
    <ul id="twocol">
      <li class="col1">Column one</li>
      <li>Column two</li>
      <li class="col1">Column one</li>
      <li>Column two</li>
      <li class="col1">Column one</li>
      <li>Column two</li>
      <li class="col1">Column one</li>
      <li>Column two</li>
      <li class="col1">Column one</li>
      <li>Column two</li>
      <li class="col1">Column one</li>
      <li>Column two</li>
      <li class="col1">Column one</li>
      <li>Column two</li>
      <li class="col1">Column one</li>
      <li>Column two</li>
      <li class="col1">Column one</li>
      <li>Column two</li>
    </ul>
    </body>
    </html>

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Stillwater Ok
    Posts
    226
    Thanks
    0
    Thanked 0 Times in 0 Posts
    While AaronW's suggestion will work just fine, here is another option that does not require you to set class's on each element (okay....half of them). In order to implement this you may want to assign the list an ID and run it that way. You can set the widths on any of the elements you wish.

    Code:
    ul {
    list-style-type:none;
    width:300px;
    padding:0;
    }
    li {
    float:left;
    margin:4px;
    border: 1px solid #0f0;
    padding:2px;
    width: 120px;
    }
    EDIT
    This can be used with the code AaronW has above. Or any other list for that matter.

    Also edited to reflect my brain fart.
    Last edited by Eskimo; 09-28-2004 at 08:36 PM.
    "Never offend people with style when you can offend them with substance."
    --Sam Brown

  • #5
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually your method is essentially the same as mine, only yours doesn't have a width of the ul parent, and so you don't get two columns; you get a bunch of left-floated list items which form a horizontal line of themselves.

    My method doesn't require a class on every other list element either. I only did that to demonstrate to the original poster how they'd go about giving each column its own colour.

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Stillwater Ok
    Posts
    226
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes the two are essentially the same. I had the width on the parent in CSSEDIT at one point, I guess I didn't get a fresh copy before I pasted it over here.
    "Never offend people with style when you can offend them with substance."
    --Sam Brown

  • #7
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    whenever my unordered lists get out of order, i just say "good job!"

  • #8
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I just have to add that *that* was funny, Magnus.
    -ts
    -Challenge The Status Quo
    -www.toddseal.com/rodin

  • #9
    Jan
    Jan is offline
    Regular Coder
    Join Date
    Jul 2002
    Location
    Finland
    Posts
    204
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for all your replies guys! I actually found the method Eskimo presented as the best for my situation.


    ~Jan


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •