1 reply [Last post]
Langer
Offline
Regular
Last seen: 13 years 3 weeks ago
Timezone: GMT+1
Joined: 2004-06-25
Posts: 24
Points: 0

Hi

I have an ordered list inside a div. The list contains 50 items.

I would like to achieve a 2 column effect, ie 25 items in each column.

I have tried floating 2 divs next to each other but my 2nd column repeats the numbers 1-25, when I want 26-50.

I tried to put a height on my div to force the list to wrap, but this didnt work.

Is the effect I am after possible and any suggestions how to achieve this much appreciated.

Also, is it possible to increase the font size of the numbers on the <ol>?

Cheers

<!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">
div, p {
padding:0px;
margin:0px;
}

.divShots {
border:1px solid #000;
float:left;
padding-right:10px;
}

ol li {
list-style: decimal-leading-zero;
margin: 0;
padding: 0;
font-size:11px;
font-weight:bold;
}

ol li p {
font-weight:normal;
}
</style>
</head>
<body>
<div class="divShots">
<ol>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
<li>RENDEZVOUS<p /> Butterscotch Vodka, Malibu</li>
</ol>
</div>
</body>
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 17 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

&lt;ol&gt; 2 columns effect

Quote:
I have tried floating 2 divs next to each other but my 2nd column repeats the numbers 1-25, when I want 26-50.
That should work just fine. You're forgetting the 'start' attribute.
<ol start="26">
  <li>...</li>
  ...
</ol>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.