SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Aug 2004
    Location
    US
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question about positioning lists horizontally

    I have a sort of hypothetical question that came up when I was looking at some old table-based websites of mine. I was trying to imagine how I would re-create various aspects of the designs with CSS. One instance that was achieved easily with tables that I'm struggling with is, a list of links, divided into 3 columns sitting next to each other. With a table, I simply put each list of links into a table cell. 3 cells across, done. Looks like this:

    link link link
    link link link
    link link link
    link link link
    link link link

    Now, with CSS I know there are a few ways to approach this. Instead of breaking it up into 3 separate <ul> lists, I tried putting all of the links into one list like so:

    <ul>
    <li>link1</li>
    <li>link1</li>
    <li>link1</li>
    etc...
    </ul>

    I then floated the <li>s and had varying degrees of success. Based on the width of the browser window, the amount of columns would change. That's cool for a liquid layout, or I could specify a fixed size for the list so it would be consistent.

    The other thing I thought I could do, was to keep them in 3 separate <ul>s like I originally did, and float them next to each other. Floats can be a little tricky like this for layout purposes, so I'm not sure I want to go that way.

    Is there another easier, or just a different approach to this I'm not thinking of?

    Thanks,
    S

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is one of those questions that really depends on what type of content it is exactly and what happens next.

    Heres a few examples of lists in 3 columns that might help with your thinking.
    Code:
    <!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 Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    ul,li {
     list-style-type:none;
     padding:0;
     margin:0;
    }
    div {margin:10px 0}
    #test1 {background:#ffffcc;width:300px;}
    #test1 ul {clear:both}
    #test1 ul li {width:99px;float:left}
    #test2 {background:#ffff00;width:50%;}
    #test2 ul {clear:both}
    #test2 ul li {width:33%;float:left}
    #t3{width:60%;background:#ffffcc;display:table;clear:both}
    ul.test3 {width:33%;display:table-cell;}
    * html ul.test3 {float:left}
    .clearer{
     height:1px;
     clear:both;
     overflow:hidden;
     margin-top:-1px;
    }
    </style>
    </head>
    <body>
    <div id="test1"> 
      <ul>
    	<li>link example</li>
    	<li>link example</li>
    	<li>link example</li>
    	<li>link example</li>
    	<li>link example</li>
    	<li>link example</li>
    	<li>link example</li>
    	<li>link example</li>
    	<li>link example</li>
    	<li>link example</li>
    	<li>link example</li>
    	<li>link example</li>
    	<li>link example</li>
    	<li>link example</li>
    	<li>link example</li>
      </ul>
      <div class="clearer"></div>
    </div>
    <div id="test2"> 
      <ul >
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
      </ul>
      <div class="clearer"></div>
    </div>
    <div id="t3"> 
      <ul class="test3">
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
      </ul>
      <ul class="test3">
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
      </ul>
      <ul class="test3">
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
    	<li><a href="#">link example</a></li>
      </ul>
    </div>
    </body>
    </html>
    Paul


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
  •