SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    split unordered list into 2 columns

    I don't know if this has been asked before and I can't find anything useful online, but is there a way I can split an unordered list into 2 columns?

    The purpose of this is, I have a list of validation errors and if there are a lot of errors, the list can be quite long as well as half the page is empty. I would like to save page space and make it look tidier.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,708
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Easy
    Code:
    <!doctype html>
    <html>
    <head>
    <title>Sexy</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    ul{width:300px;list-style:none;}
    li{float:left;width:150px;background:red;}
    </style>
    </head>
    <body>
    <ul>
    <li>safas 1</li>
    <li>safas 2</li>
    <li>safas 3</li>
    <li>safas 4</li>
    <li>safas 5</li>
    <li>safas 6</li>
    <li>safas 7</li>
    <li>safas 8</li>
    <li>safas 9</li>
    <li>safas 10</li>
    <li>safas 11</li>
    <li>safas 12</li>
    </ul>
    </body>
    </html>
    Also I should note that this is being introduced into CSS3
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Enthusiast kaloua3's Avatar
    Join Date
    Mar 2009
    Location
    Florida
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you don't care that the items are listed left to right on each line, you can make them have a fixed width and float them left. Depending on the width of the items and your container for them, you can have 2 or 3 (or more) per row. How are these list items being created? If the page is created dynamically it might be a bit harder.
    Last edited by kaloua3; Apr 10, 2009 at 08:01. Reason: oops, got the line direction wrong!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,708
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kaloua3 View Post
    If you don't care that the items are listed left to right on each line, you can make them have a fixed width and float them left. Depending on the width of the items and your container for them, you can have 2 or 3 (or more) per row. How are these list items being created? If the page is created dynamically it might be a bit harder.
    Yes..as I posted.

    I just did a thourough test of the multi column layout to see if any browsers supported it

    None do so you are stuck with this..
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When testing draft or experimental properties, you need to test for vendor prefix versions. For flowed columns, support is incomplete, but Gecko (-moz-) and Webkit (-khtml-) have implemented the basics. The Webkit engine drops the list markers for some reason (Safari/Win v 3.5 and 4b).
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xml:lang="en"
          xmlns="http://www.w3.org/1999/xhtml"
          lang="en">
    <head>
      <meta name="generator"
            content=
            "HTML Tidy for Linux (vers 7 December 2008), see www.w3.org" />
    
      <title>Flowed columns</title>
      <meta http-equiv="content-type"
            content="text/html; charset=utf-8" />
      <meta name="author"
            content="Gary Turner" />
      <style type="text/css">
    /*<![CDATA[*/
      ul, ol {
        -ms-column-count: 2;
        -o-column-count: 2;
        -moz-column-count: 2;
        -khtml-column-count: 2;
        column-count: 2;
        }
      /*]]>*/
      </style>
    </head>
    
    <body>
      <ul>
        <li>item</li>
    
        <li>item</li>
    
        <li>item</li>
    
        <li>item</li>
    
        <li>item</li>
    
        <li>item</li>
    
        <li>item</li>
    
        <li>item</li>
      </ul>
    
      <ol>
        <li>item</li>
    
        <li>item</li>
    
        <li>item</li>
    
        <li>item</li>
    
        <li>item</li>
    
        <li>item</li>
    
        <li>item</li>
    
        <li>item</li>
      </ol>
    
    </body>
    </html>
    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,708
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    I can't believe I forgot to put that in lolz.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

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