By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,396 Members | 1,835 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,396 IT Pros & Developers. It's quick & easy.

CSS - Multicolumn lists

P: n/a
I'm a system developer and won't even pretend that I'm a designer, but
I want to move our graphics designers off of "old way" of hacking html
to get desired results, to marking up documents according to current
web standards.

I've been trying to design on of our new pages myself, but the biggest
problem I'm running into is trying to create multicolumn lists. I
have a list of items, which is most definitely a list, not a table,
but I can't for the life of me figure out how to display a list in
three columns. The main reason I want to do this, is for screen real
estate. I've tried setting the li tag to display:inline, and setting
a fixed width, but I guess the width doesn't go along with the inline
attribute. Has anyone had experience with this?
Jul 20 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
Chris Stout wrote:
I'm a system developer and won't even pretend that I'm a designer, but
I want to move our graphics designers off of "old way" of hacking html
to get desired results, to marking up documents according to current
web standards.

I've been trying to design on of our new pages myself, but the biggest
problem I'm running into is trying to create multicolumn lists. I
have a list of items, which is most definitely a list, not a table,
but I can't for the life of me figure out how to display a list in
three columns. The main reason I want to do this, is for screen real
estate. I've tried setting the li tag to display:inline, and setting
a fixed width, but I guess the width doesn't go along with the inline
attribute. Has anyone had experience with this?


Small example with fixed width in px ignoring accessibility here for a
moment. We have the following unordered list:

<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
<li>Item 06</li>
<li>Item 07</li>
<li>Item 08</li>
<li>Item 09</li>
</ul>

That is the markup. Now it is time to style:

ul{
margin:0;
padding:0;
list-style:none;
width:600px;
}
ul li{
margin:0;
padding:0;
display:block;
float:left;
width:200px;
}

That is it, I hope :-)
--
Anne van Kesteren
<http://www.annevankesteren.nl/>
Jul 20 '05 #2

P: n/a
Chris Stout wrote:

problem I'm running into is trying to create multicolumn lists. I
have a list of items, which is most definitely a list, not a table,
but I can't for the life of me figure out how to display a list in
three columns. The main reason I want to do this, is for screen real
estate.


You mean you want a list to go down the screen, and then start again
at the top of the next column? Quite a bit more difficult then you
might imagine. You can position different elements in different
columns on a graphical browser, but not the same e.g. ul element that way.

The only thing you can try is to break up the list into several lists,
and float them left. But if the text is really one list, then you
absolutely should not mark it up as anything but one list. IMHO, of
course.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #3

P: n/a
Brian wrote:
Chris Stout wrote:

problem I'm running into is trying to create multicolumn lists. I
have a list of items, which is most definitely a list, not a table,
but I can't for the life of me figure out how to display a list in
three columns. The main reason I want to do this, is for screen real
estate.

You mean you want a list to go down the screen, and then start again at
the top of the next column? Quite a bit more difficult then you might
imagine.


element{
float:top; /* [1] */
}

I want CSS3 now!

[1] <http://www.w3.org/TR/2002/WD-css3-box-20021024/#float>

--
Anne van Kesteren
<http://www.annevankesteren.nl/>
Jul 20 '05 #4

P: n/a
*Chris Stout*:

I've been trying to design on of our new pages myself, but the biggest
problem I'm running into is trying to create multicolumn lists.


I've a test page for this at
<http://webdesign.crissov.de/temp/multicol-lists>, the English original is
at <http://www.fu2k.org/alex/css/cssjunk/ListColumns.mhtml>.

--
"Show me a sane man and I will cure him." -- C.G. Jung
Jul 20 '05 #5

P: n/a
Below is an example from a book which I was playing around with.
I was unfortunately unable to determine how to vary the column lengths so
that the TOP of page links would correspond to the column text lengths.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>U.S. History: Declaration of Independence</title>
<style type="text/css">
body, p, li, address { font-family: "Times New Roman", Times, serif;
font-size: 16px; }

body { background: #fc9; color: black; margin: 10px; padding: 0 0 10px 0; }

div.top { background: url(blackmarb.jpg); background-color: #039; color:
black; padding-left: 15px; padding-right: 15px; margin-bottom: 0; }

div.main { width: 750px; }

div.left { position: absolute; left: 15px; top: 152px; background:
url(paper2.gif); background-color: #cfc; color: black; width: 240px; height:
1665px; text-align: left; padding: 5px 0; text-align: left; margin-right:
1.5%; }

div.center { position: absolute; top: 152px; left: 15px; background:
url(paper2.gif); background-color: #cfc; color: black; width: 240px; height:
1665px; padding: 5px 0; text-align: left; margin-left: 250px; margin-right:
auto; }

div.right { position: absolute; left: 500px; top: 152px; background:
url(paper2.gif); background-color: #cfc; color: black; width: 240px; height:
1665px; padding: 5px 0; text-align: left; margin-left: 2%; margin-right:
0; }

div.bottompos { position: absolute; left: 15px; top: 1840px; }

div.bottom { position: relative; bottom: 10px; width: 740px; background:
url(tanback.jpg); background-color: #cfc; color: navy; text-align: center;
margin-top: 10px; padding-bottom: 5px; }
div.pad { padding: 0 5px 0 10px}
div.padtop { padding-top: 0; padding-bottom: 5px; }

div#leftlink { position: absolute; top: 1785px; left: 25px; }
div#leftlink p { text-indent: 0; }

div#ctrlink { position: absolute; top: 1785px; left: 275px; }
div#ctrlink p { text-indent: 0; }

div#rightlink { position: absolute; top: 1785px; left: 525px; }
div#rightlink p { text-indent: 0; }

a { color: blue; background: transparent; }

h1 { color: #fc0; background-color: transparent; text-align: center;
border-bottom: white 1px solid; padding-top: 10px; padding-bottom: 10px;
margin-top: 0;}
h2 { color: #cf9; background-color: transparent; text-align: center;
padding-bottom: 0; }

p { margin-top: 0; margin-bottom: 0; text-indent: 1.5em; }
p.first { text-indent: 0; }

ul { margin-top: 0; margin-bottom: 0; }
li { margin-left: -2em; list-style-position: inside; text-indent: 1em; }

address { padding-top: 1%; padding-bottom: 1%; }

span.drop { float: left; font-size: 40px; font-weight: bold; color: maroon;
background-color: transparent; margin-top: -3px; margin-bottom: -5px; }

</style>
</head>
<body>

<div class="main">
<div class="top">
<div class="padtop">
<h1>The Declaration of Independence</h1>
<h2>In Congress, July 4, 1776</h2>
</div>
</div>

<div class="left">
<div class="pad">

<a name="top"></a>
<p class="first"><span class="drop">W</span>hen in the Course of human
events, it becomes necessary for one people to dissolve the political bands
which have connected them with another, and to assume among the powers of
the earth, the separate and equal station to which the Laws of Nature and of
Nature's God entitle them, a decent respect to the opinions of mankind
requires that they should declare the causes which impel them to the
separation.</p>

<p>We hold these truths to be self-evident, that all men are created equal,
that they are endowed by their Creator with certain unalienable Rights, that
among these are Life, Liberty, and the pursuit of Happiness. That to secure
these rights, Governments are instituted among Men, deriving their just
powers from the consent of the governed. That whenever any Form of
Government becomes destructive of these ends, it is the Right of the People
to alter or to abolish it, and to institute new Government, laying its
foundation on such principles and organizing its powers in such form, as to
them shall seem most likely to effect their Safety and Happiness.</p>

<p>Prudence, indeed, will dictate that Governments long established should
not be changed for light and transient causes; and accordingly all
experience hath shewn, that mankind are more disposed to suffer, while evils
are sufferable, than to right themselves by abolishing the forms to which
they are accustomed.</p>

<p>But when a long train of abuses and usurpations, pursuing invariably the
same object evinces a design to reduce them under absolute Despotism, it is
their right, it is their duty, to throw off such Government, and to provide
new Guards for their future security.</p>

<p>Such has been the patient sufferance of these Colonies; and such is now
the necessity which constrains them to alter their former Systems of
Government. The history of the present King of Great Britain is a history of
repeated injuries and usurpations, all having in direct object the
establishment of an absolute Tyranny over these States. To prove this, let
Facts be submitted to a candid world.</p>

<p>He has refused his Assent to Laws, the most wholesome and necessary for
the public good.</p>

<p>He has forbidden his Governors to pass Laws of immediate and pressing
importance, unless suspended in their operation till his Assent should be
obtained, and when so suspended, he has utterly neglected to attend to
them.</p>

<p>He has refused to pass other Laws for the accommodation of large
districts of people, unless those people would relinquish the right of
Representation in the Legislature, a right inestimable to them and
formidable to tyrants only.</p>

<p>He has called together legislative bodies at places unusual,
uncomfortable, and distant from the depository of their public Records, for
the sole purpose of fatiguing them into compliance with his measures.</p>
</div>
</div>

<div id="leftlink">
<p>Return to <a href="#top">Top</a>.</p>
</div>

<div class="center">
<div class="pad">

<p>He has dissolved Representative Houses repeatedly, for opposing with
manly firmness his invasions on the rights of the people.</p>

<p>He has refused for a long time, after such dissolutions, to cause others
to be elected; whereby the Legislative powers, incapable of Annihilation,
have returned to the People at large for their exercise; the State remaining
in the meantime exposed to all the dangers of invasion from without, and
convulsions within.</p>

<p>He has endeavoured to prevent the population of these States; for that
purpose obstructing the Laws for Naturalization of Foreigners; refusing to
pass others to encourage their migrations hither, and raising the conditions
of new Appropriations of Lands.</p>

<p>He has obstructed the Administration of Justice, by refusing his Assent
to Laws for establishing Judiciary powers.</p>

<p>He has made Judges dependent on his Will alone, for the tenure of their
offices, and the amount and payment of their salaries.</p>

<p>He has erected a multitude of New Offices, and sent hither swarms of
Officers to harass our people, and eat out their substance.</p>

<p>He has kept among us, in times of peace, Standing Armies, without the
consent of our legislatures.</p>

<p>He has affected to render the Military independent of and superior to the
Civil power.</p>

<p>He has combined with others to subject us to a jurisdiction foreign to
our constitution and unacknowledged by our laws; giving his Assent to their
Acts of pretended Legislation:</p>

<ul>
<li>For protecting them by a mock Trial from punishment for any Murders
which they should commit on the Inhabitants of these States:
<li>For cutting off our Trade with all parts of the world:
<li>For imposing Taxes on us without our Consent:
<li>For depriving us in many cases of the benefits of Trial by Jury:
<li>For transporting us beyond Seas to be tried for pretended offences:
<li>For abolishing the free System of English Laws in a neighbouring
Province, establishing therein an Arbitrary government, and enlarging its
Boundaries so as to render it at once an example and fit instrument for
introducing the same absolute rule into these Colonies:
<li>For taking away our Charters, abolishing our most valuable Laws and
altering fundamentally the Forms of our Governments:
<li>For suspending our own Legislatures, and declaring themselves invested
with power to legislate for us in all cases whatsoever.
</ul>

<p>He has abdicated Government here by declaring us out of his Protection
and waging War against us.</p>

<p>He has plundered our seas, ravaged our Coasts, burnt our towns, and
destroyed the lives of our people.</p>
</div>
</div>

<div id="ctrlink">
<p>Return to <a href="#top">Top</a>.</p>
</div>

<div class="right">
<div class="pad">

<p>He is at this time transporting large Armies of foreign Mercenaries to
complete the works of death, desolation and tyranny, already begun with
circumstances of cruelty and perfidy scarcely paralleled in the most
barbarous ages, and totally unworthy the Head of a civilized nation.</p>

<p>He has constrained our fellow Citizens taken Captive on the high Seas to
bear Arms against their Country, to become the executioners of their friends
and Brethren, or to fall themselves by their Hands.</p>

<p>He has excited domestic insurrections amongst us, and has endeavoured to
bring on the inhabitants of our frontiers, the merciless Indian Savages,
whose known rule of warfare is an undistinguished destruction of all ages,
sexes and conditions.</p>

<p>In every stage of these Oppressions We have Petitioned for Redress in the
most humble terms. Our repeated Petitions have been answered only by
repeated injury. A Prince, whose character is thus marked by every act which
may define a Tyrant, is unfit to be the ruler of a free people.</p>

<p>Nor have We been wanting in attentions to our British brethren.</p>

<ul>
<li>We have warned them from time to time of attempts by their legislature
to extend an unwarrantable jurisdiction over us. We have reminded them of
the circumstances of our emigration and settlement here.
<li>We have appealed to their native justice and magnanimity, and we have
conjured them by the ties of our common kindred to disavow these
usurpations, which would inevitably interrupt our connections and
correspondence.
</ul>

<p>They too have been deaf to the voice of justice and of consanguinity. We
must, therefore, acquiesce in the necessity, which denounces our Separation,
and hold them, as we hold the rest of mankind, Enemies in War, in Peace
Friends.</p>

<p>We, therefore, the Representatives of the United States of America, in
General Congress, Assembled, appealing to the Supreme Judge of the world for
the rectitude of our intentions, do, in the Name, and by the authority of
the good People of these Colonies, solemnly publish and declare.</p>

<p>That these United Colonies are, and of Right ought to be Free and
Independent States; that they are Absolved from all Allegiance to the
British Crown, and that all political connection between them and the State
of Great Britain is and ought to be totally dissolved; and that as Free and
Independent States, they have full Power to levy War, conclude Peace,
contract Alliances, establish Commerce, and to do all other Acts and Things
which Independent States may of right do.</p>

<p>And for the support of this Declaration, with a firm reliance on the
protection of Divine Providence, we mutually pledge to each other our Lives,
our Fortunes, and our sacred Honor.</p>
</div>
</div>

<div id="rightlink">
<p>Return to <a href="home.html">Home</a>.</p>
</div>

<div class="bottompos">
<div class="bottom">
<address>
John Smith<br>
E-Mail: <a href="mailto:js****@us-history.com">js****@us-history.com</a><br>
Web Address: <a
href="http://www.us-history.com/">http://www.us-history.com/</a>
</address>
</div>
</div>

</div>
</body>
</html>
Jul 20 '05 #6

P: n/a
On 17 Dec 2003 06:11:35 -0800, ch***@williamsburg.com (Chris Stout)
wrote:
I'm a system developer and won't even pretend that I'm a designer, but
I want to move our graphics designers off of "old way" of hacking html
to get desired results, to marking up documents according to current
web standards.

I've been trying to design on of our new pages myself, but the biggest
problem I'm running into is trying to create multicolumn lists. I
have a list of items, which is most definitely a list, not a table,
but I can't for the life of me figure out how to display a list in
three columns. The main reason I want to do this, is for screen real
estate. I've tried setting the li tag to display:inline, and setting
a fixed width, but I guess the width doesn't go along with the inline
attribute. Has anyone had experience with this?


You might like to look at
http://www.members.iinet.net.au/~abell1/oboe.htm

and associated pages which have the alphabet in three columns + a
blank, and another list below.
Please note that I can't make it work reliably with MSIE for the Mac,
though it does work in MSIE 5.5, Opera 7.23, Mozilla 1.3, and Netscape
6.2

Regards, Alex

Jul 20 '05 #7

P: n/a
Anne van Kesteren <ma**@annevankesteren.nl> wrote in message news:<br**********@reader10.wxs.nl>...
Brian wrote:
Chris Stout wrote:

problem I'm running into is trying to create multicolumn lists. I
have a list of items, which is most definitely a list, not a table,
but I can't for the life of me figure out how to display a list in
three columns. The main reason I want to do this, is for screen real
estate.

You mean you want a list to go down the screen, and then start again at
the top of the next column? Quite a bit more difficult then you might
imagine.


element{
float:top; /* [1] */
}

I want CSS3 now!


Hell, I want CSS2 now.
Jul 20 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.