what is the preferred way to have text instead of bullets with css (hanging indent)

Question

Hello

What is the preferred methon to create something like

Apples   Apples can be
         green or red or
         more text more text

Bananas  Most of the time
         bananas are yellow
         (or green, if they're
         not ripe)

Item X   Each item should be aligned
         with the previous item, and
         each text (such as this 
         sentence) should be alligned
         with the previous text.

I have tried

.desc {
  margin-left: 140px;
  text-indent: -100px;
}

.item {
  width:100px;
}

...

<div class='desc'>
  <span class='item'>Apples</span> Apples can be green ....
</div>

But it didn't really give the result I expected (at least in Firefox).

Can someone help me here?

Thanks

René

Answer 1

A real table wouldn't seem to be out of line here since you seem to have tabular data. In that case you would just use the normal table syntax.

Answer 2

It depends on data you want to use, but semantically speaking it seems like term and it's description, so dl hops in mind ^^

dt { display: block; float: left; width: 140px; }

<dl>
  <dt>Apples</dt>
  <dd>Description to it more lines of text to show it.</dd>
  <dt>Bananas</dt>
  <dd>Description to it more lines of text to show it.</dd>
  <dt>Lemon</dt>
  <dd>Description to it more lines of text to show it.</dd>
</dl>

Answer 3

Semantically, this looks like a case for the little-known <dd> and <dt> elements.

The W3C reference has a nice example:

<DL>
  <DT>Dweeb
  <DD>young excitable person who may mature
    into a <EM>Nerd</EM> or <EM>Geek</EM>

  <DT>Hacker
  <DD>a clever programmer

  <DT>Nerd
  <DD>technically bright but socially inept person

</DL>

However, its default styling is not exactly what you want. Check out this article: Definition lists – misused or misunderstood? it has a number of styling examples:

• Definition list with background images
• Definition list as boxes
• Styling a definition list to look like a table

Answer 4

Using a two-column <table> would be a good solution here, assuming it isn't a very very long table as this loads differently from a bunch of divs or other elements.

Using a table will also leave you with the flexibility of formatting individual elements inside cells as you want, such as a bulleted list inside a <td>.