Question about positioning lists horizontally

**sal175** · Aug 18, 2004 12:53

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

**Paul O'B** · Aug 18, 2004 13:54

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

User Tag List

Thread: Question about positioning lists horizontally

Thread Tools

Display

Question about positioning lists horizontally

Bookmarks

Bookmarks

Posting Permissions