3 replies [Last post]
nofx1728
Offline
Regular
Florida
Last seen: 9 years 40 weeks ago
Florida
Timezone: GMT-5
Joined: 2006-11-21
Posts: 32
Points: 4

Hi. I'm trying to create a list the acts as 3 columns. I want to be able to display Date in left column, then city, then location. I know I can create floated

and create a 3 column effect like this. But I wanted to try and keep it structured with a list since column 2 and 3 pertain to column 1.

ex.
September 1, 2007 Ann Arbor, MI The Big House
September 8, 2007 Miami, FL The Swamp

This is the code I put together for the css.

.showdates { text-align: center; list-style-image: none; list-style: none; font-size: 14px; font-weight: bold; color: #006597; padding: 10px 0px 0px 0px; margin: 0px; }

dl.showdates dd {
display: inline;
margin: 0px;
padding-left: 10px;
text-align: left;
width: 160px;
}

.showlist {
list-style: none;
margin: 0px;
padding: 0px;
}

  • September 1, 2007
    Ann Arbor, MI
    The Big House
  • September 8, 2007
    Miami, FL
    The Orange Bowl

The problem I'm having is it is not allowing me to set the

width:160px; so that the spacing between the 3 columns lines up. So anytime the text are different lengths it throws the columns off. Does anyone know how to fix this? BTW, the div that all this is going into is width: 580px;

Thanks,

nofx1728

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 28 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

<ul class="showlist">

  • September 1, 2007 Ann Arbor, MI The Big House
  • September 8, 2007 Miami, FL The Orange Bowl
================ li { overflow: hidden; display: inline-block; /*IE≤6 hasLayout trigger*/ }

li {
display: block; /*repairs display while leaving hasLyout*/
}

li span {
float: left;
width: 160px;
}

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.

nofx1728
Offline
Regular
Florida
Last seen: 9 years 40 weeks ago
Florida
Timezone: GMT-5
Joined: 2006-11-21
Posts: 32
Points: 4

Worked Perfect. Thanks for

Worked Perfect. Thanks for your help.

Thanks,

nofx1728

pylorus
Offline
newbie
Last seen: 12 years 43 weeks ago
Joined: 2008-11-08
Posts: 7
Points: 0

Is there a way to add

Is there a way to add bullets to this list?
After reading several tutorials, I finally stuck my two lists in a table but if I could eliminate that, I would. Only trouble is to preserve the bullets!