...

View Full Version : long list with multiple columns



adamclark
07-08-2010, 09:00 PM
I have a long list - long enough that instead of being one long column, it ends up being three columns - this is godd and what I want.

The problem is the list points are displayed going from left to right, then down a line and left to right and so on, as if you were writing a letter!

I want the list to go all the way down one column, then all the way down the secon then all the way down the third.

That way it will be a lot easier for the user to skim the list and pick the point they want.

How do i do this?!

Any help much appreciated. Thanks.




#rightPan ul{width:450px; height:120px; display:block; padding:10px 30px 0;}
#rightPan ul li{width:150px; height:27px; float:left; position:relative; margin:0 auto;}

<ul>
<li><a href=".html">Belfast</a></li>
<li><a href=".html">Birmingham</a></li>
<li><a href=".html">Bradford</a></li>
<li><a href=".html">Bristol</a></li>
<li><a href=".html">Cardiff</a></li>
<li><a href=".html">Coventry</a></li>
<li><a href=".html">Edinburgh</a></li>
<li><a href=".html">Glasgow</a></li>
<li><a href=".html">Hull</a></li>
<li><a href=".html">Leeds</a></li>
<li><a href=".html">Leicester</a></li>
<li><a href=".html">Liverpool</a></li>
<li><a href=".html">London</a></li>
<li><a href=".html">Manchester</a></li>
<li><a href=".html">Nottingham</a></li>
<li><a href=".html">Plymouth</a></li>
<li><a href=".html">Sheffield</a></li>
<li><a href=".html">Southampton</a></li>
<li><a href=".html">Stoke-On-Trent</a></li>
<li><a href=".html">Wolverhampton</a></li>
<li><a href=".html">Wolverhampton</a></li>
<li><a href=".html">Wolverhampton</a></li>
<li><a href=".html">Wolverhampton</a></li>
<li><a href=".html">Wolverhampton</a></li>
<li><a href=".html">Wolverhampton</a></li>
<li><a href=".html">Wolverhampton</a></li>
<li><a href=".html">Wolverhampton</a></li>
<li><a href=".html">Wolverhampton</a></li>
<li><a href=".html">Wolverhampton</a></li>
<li><a href=".html">Wolverhampton</a></li>
</ul>

effpeetee
07-08-2010, 10:40 PM
Have a look at this. (http://www.exitfegs.co.uk/Sources.html)

It has three columns.

Frank

abduraooft
07-09-2010, 07:57 AM
The problem is the list points are displayed going from left to right, then down a line and left to right and so on, as if you were writing a letter!
Split the list items in to three blocks and wrap inside three separate <ul>s. Then set a float left to these <ul>s in CSS.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum