0

I am getting a little confused by this.

Currently have a table, with two columns.

On the left we have a description, and on the right a fact.

The left hand side is usually one line, but might wrap over onto two.

The right hand side is often 3, 4 or more lines.

How can I arrange this using CSS instead of tables.

Obviously the two sides have to line up for each row of information.

desc1        fact 1
desc2        fact 2
             more to fact 2
desc3        fact 3

etc.

Ian
  • 147
  • 1
  • 12
  • Tell me, why don't you want to use tables? You can easially align the `desc2` to the middle. – nkmol Jan 07 '14 at 09:27
  • I thought that tables were bad? Everything should be css? Am I mistaken? – Ian Jan 07 '14 at 10:46
  • Do not worry, tables aren't bad for this example. You use tabular-data, so don't mind using it. I suggest you to read this: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html and http://www.vanseodesign.com/css/tables/ . Also just make it work. If nobody is complaining, why should you? – nkmol Jan 07 '14 at 18:33

1 Answers1

0

Like this?

HTML

<ul class="sublist">
  <li>Item 1</li>
  <li>Description 1</li>
</ul>
<ul class="sublist">
  <li>Item 2</li>
  <li>Description 2 / Description 2 / Description 2 / Description 2</li>
</ul>
<ul class="sublist">
  <li>Item 3</li>
  <li>Description 3</li>
</ul>

CSS

ul.sublist > li {
  display: inline-block;
  max-width: 150px;
  vertical-align: top;
}

Demo

Goombah
  • 2,835
  • 2
  • 12
  • 22