ansaurus

Question

css two column list with balanced column height

Answer 1

+1 A:

Use a dl (definition list) instead of ul

Example:

<dl>
    <dt>price</dt>
    <dd>1.5</dd>
    <dt>description</dt>
    <dd>Some text about the product written here and will expand the height of this column</dd>
    <dt>availability</dt>
    <dd>yes</dd>
    <dt>Feature</dt>
    <dd>Some feature about the product </dd>
</dl>

with this CSS:

dt { 
    float: left; 
}
dt, dd { 
    width: 100px;
}

Edit: ignore the table-fetishists here, in semantic and accessibility terms this data definitely belongs in a definition list, not in a table. There is namely no means of a single key with multiple values. It is a list of key-value pairs (definitions).

BalusC 2009-12-09 15:04:22

Interesting indeed, I would thought table for sure... but definition list seems to make a lot more sense. Thanks for the info!!

Zoidberg 2009-12-09 15:18:28

-1 using floats to avoid putting tabular data in tables is nonsense

cletus 2009-12-09 15:33:44

Using a definition list for this example will break in legacy browsers, however a table will degrade gracefully.Depends how much work you want to put into it to get it to look right cross browser.See this article by Jonathan Snook: http://snook.ca/archives/html_and_css/definition_list

Jonny Haynes 2009-12-09 15:34:54

Why use a `<dl>` and style it to look like a table?

Jonny Haynes 2009-12-09 15:40:15

Counter-question: why use a table with keys in one column and values in other column? This is going a neverending story. At least my opinion still stands: key-value pairs belongs in a `dl`. keys with multiple values belongs in a `table`. Style is a non-semantic issue.

BalusC 2009-12-09 15:42:59

I can ask the same question, why use `div`s for content and style it to look like a table? This makes no utter sense. It's all about semantic web, you should know that better.

BalusC 2009-12-09 15:46:10

@cletus: prefering tables over definition lists is one thing, but downvoting because float is used for presentational reasons seems a bit silly. That´s like saying that you cannot use floats for lay-out...

jeroen 2009-12-09 17:32:32

@jeroen: it's not about "preferring" tables. It's about using the appropriate tool for the job. And using tricks with questionable backwards compatibility because you've misinterpreted "using tables for page layout" to some twisted notion of semantic markup is naive and foolhardy.

cletus 2009-12-09 23:10:21

All of those aversion against `<dl>` is simply a sign of ignorance and the fear to use a very-seldom used element because it can be potentially wrong. I'll say once again: *this is not wrong!*.

BalusC 2009-12-10 13:57:38

I have never said at any point that a `<dl>` is wrong ... just not the best way of displaying the data shown.READ THE ORIGINAL QUESTION

Jonny Haynes 2009-12-10 14:09:57

Answer 2

+2 A:

As the comment from Cletus on your question says... use a table. There is a valid use for tables, and if this isnt one then nothing is - display of this type of data is the exact reason they were implemented.

<style type="text/css">
  table.product td, table.product th {vertical-align: top; padding: 5px;}
</style>
<table class="product" cellspacing="0" border="0" width="250">
<tr>
  <th>price</th>
  <td>1.5</td>
</tr>
<tr>
  <th>description</th>
  <td>Some text about the product written here and will expand the height of this column</td>
</tr>
<tr>
  <th>availability</th><td>yes</td>
</tr>
<tr>
  <th>Feature</th>
  <td>Some feature about the product</td>
</tr>
</table>

prodigitalson 2009-12-09 15:18:42

Tables are what you need ... it's called tabular data for a reason.

Jonny Haynes 2009-12-09 15:20:31

Look how ugly and non-semantic this is. The headers aren't grouped in a `<thead>` and the body isn't separated into a `<tbody>`.

BalusC 2009-12-09 15:21:05

That is true, it's not the best formatted table. But it's more in the right direction.Don't think you'd need the `<thead>` property ... definitely needs a `<caption>` and a `<tbody>` though

Jonny Haynes 2009-12-09 15:29:27

yeah i could have added caption and tbody - probably should have that i'll admit. but as far as thead and by extension tfoot they arent needed because the data structure isnt that complex.

prodigitalson 2009-12-09 15:37:29

I agree with that!

Jonny Haynes 2009-12-09 15:39:13

It's not tabular data, by any sensible definition.

Robert Grant 2009-12-09 15:47:32

Answer 3

A:

Here'd be my stab at it. Tested in Firefox 3 and IE7, so YMMV, but at least it'll degrade nicely.

<html>
<head>
 <style type="text/css">
   #items {
  width: 300px;
  border-top:1px solid gray;
   }

   #items div {
  clear: left;
  overflow:hidden;
  padding: 5px 0;
  border-bottom:1px solid gray;
   }

   .key  {
  width:100px;
  float:left;
   }

   .value  {
  width:200px;
  float:left;
   }
 </style>
</head>
<body>
  <div id="items">
    <div>
      <span class="key">price</span>
      <span class="value">1.5</span>
    </div>
    <div>
  <span class="key">description</span>
  <span class="value">Some text about the product written here 
        and will expand the height of this column</span>
    </div>
    <div>
  <span class="key">availability</span>
  <span class="value">Yes</span>
    </div>
    <div>
  <span class="key">Feature</span>
  <span class="value">Some feature about the product</span>
    </div>
  </div>
</body>
</html>

See also:

Robert Grant 2009-12-09 16:15:27

The links you've provided refer to the layout of the whole page ... you should still use a table for TABULAR data in the content are of an HTML page.That's a really newbie comment ... but judging by your score you're not a newbie??

Jonny Haynes 2009-12-09 16:18:59

I agree with Jonny. You and Balus' argument for a DL is completely valid. However, the links you posted regarding tables for layout are completely irrelevant because no one is trying use a table for layout. The argument is over whether a DL or a Table is semantically more correct, not whether we sould be creating a multi-column layout or something else in a table or what have you. Moreover your posted solution in my opintion is worse than either the dl or the table because you are relying on class attributes to provide the semantic context instead of the element itself...

prodigitalson 2009-12-09 16:25:13

It's hard to know how many more times we can emphasise that **tabular content is data that requires two labels to identify it** without starting to sound patronising. What about that statement is confusing?

Robert Grant 2009-12-09 16:25:47

Which, if there is no element to accurately provide that context is fine - but in this case there are two potential choices - TABLE and DL so really youre reinventing the wheel with no gained benefits.

prodigitalson 2009-12-09 16:26:20

@prodigitalson - they are exactly using tables for layout. Not overall page layout, but layout nonetheless.

Robert Grant 2009-12-09 16:27:20

@Robert: and thats a valid argument/fact/opinion/whatever but the links you posted are an entirely differnt argument - one we arent even engaged in directly.

prodigitalson 2009-12-09 16:27:42

@prodigitalson - sorry, what context? The data in question has one label to identify it. Therefore it's not tabular data. That's the first thing to get straight.

Robert Grant 2009-12-09 16:29:35

@Robert - Your articles are discussing the layout of the entire page and moving from the 'bad old days' of Table layouts to Div/CSS layouts ... they're totally valid ... just not as an explanation/answer for this question!

Jonny Haynes 2009-12-09 16:31:46

@robert: context meaning that in your example you are relying soley on the call attribute to provide the context for "key" and "value" insead of a th+td OR dt+dd - thus IMHO your solution (and Tyler's below) worse than table. If you want to say its not Tabular data ok - then push use of a DL but it makes no sense to use a DIV>SPAN|SPAN when you can use a DL strcture.

prodigitalson 2009-12-09 16:36:25

I think it's completely appropriate; if the only reason you're using a table is because you're trying to get things to line up, then you're doing it wrong. Regardless of whether it's the whole page or just a portion of it, the argument is identical. If you're using a table because the data is two-dimensional, then great. Otherwise, *regardless*, you're doing it wrong.

Robert Grant 2009-12-09 16:36:48

And regarding DLs, sure, they probably are better semantically (if one stretches the definition of a...definition), but they're both far better than tables for styling flexibility/future-proofing (hence the article links) and yet I had to upvote the DL answer by BalusC to keep it out of the negative, and the leading answer is currently a table layout with one vote. Why if that's the case are you splitting much tinier semantic hairs between DL and div?

Robert Grant 2009-12-09 16:41:50

@Robert: That was never my argument. My argument was that "a tableis a valid structural expression of the keys/values", and that it has the inherent display of what hes trying to achieve - but i never argued that it was a simple matter of "this will look right" which is what you seem to saying. Thus, the battle of CSS/Table layout is a not really part of the argument, im already on the side of CSS for that argument. Where we disagree is what the proper semantic expression of key/value pairs is.

prodigitalson 2009-12-09 16:42:59

It certainly is a valid structural expression of 2 keys to 1 value; there's no better way to express that than with a table.

Robert Grant 2009-12-09 16:46:58

@Robert Just out of interest, where have you got this '2 keys to 1 value' definition of a table from?

Jonny Haynes 2009-12-09 16:51:15

It's easier to draw it than say it, but basically a table has a row of keys along the top, and a column of keys down the left. Each datum is identified by the two keys that uniquely identify its location. If you didn't need that two-dimensional layout to identify your datum, you didn't need a table.

Robert Grant 2009-12-09 17:00:43

umm.. dude.. you just copied and pasted code from my answer and changed a few minor details

tybro0103 2009-12-09 19:55:33

Actually, I didn't.

Robert Grant 2009-12-10 14:00:13

Really? I guess it's coincidence that your elements are named 'key' and 'value' and just happen to both be floated left with widths of 100 and 200... not to mention the parent element with hidden overflow and the 1px solid gray borders. Or maybe it's just we think the same way.

tybro0103 2009-12-10 14:48:34

1) "Key" and "value" are not nonstandard terms. 2) I could've floated right and reversed the order in markup, but that would be weird. 3) Those widths (to the nearest 50px) approximate the text wrapping shown in the question in my browser's default font/font size. 4) Hidden overflow is the right thing to use. 5) Grey looks better than black; I normally use #555.

Robert Grant 2009-12-10 15:03:49

In fact I think I read BalusC's first comment that mentioned key/value.

Robert Grant 2009-12-10 15:05:04

lol.. I'd have to say I used the same reasoning.

tybro0103 2009-12-10 15:17:03

Answer 4

A:

This will function better than a <dl>, but is not as semantically correct as a <table>.

<ul>
    <li>
     <h2>Price</h2>
     <p>1.5</p>
    </li>
    <li>
     <h2>Description</h2>
     <p>Some text about the product written here and will expand the  height of this column</p>
    </li>
    <li>
     <h2>Availability</h2>
     <p>Yes</p>
    </li>
    <li>
     <h2>Feature</h2>
     <p>Some feature about the product</p>
    </li>
</ul>

This is better that a <dl> because the <li> acts as a wrapper, and will hold the <p> content. If you use the <dl> there is no wrapper around the seperate <dt> and <dd>s.

And when the <p> expands it won't crash into next <li>

The CSS:

li {
    overflow: hidden;
    width: 500px; /* or however wide it needs to be */
    }

li h2 {
    float: left;
    width: 150px;
    }  

li p {
    float: right;
    width: 350px;
    }

Jonny Haynes 2009-12-09 16:16:54

Wow, simply wow (express of astonishment).

BalusC 2009-12-09 16:58:00

what you astonished by?

Jonny Haynes 2009-12-10 08:14:11

My guess is the lengths that semantic HTML zealots will go to to avoid using tables for tabular data.

cletus 2009-12-10 10:51:14

But I'm not one of those ... I've spent forever arguing that it should be a table. I'm just merely pointing out that my answer would be a better solution (cross browser), than a `<dl>`

Jonny Haynes 2009-12-10 11:11:16

Because you literally commented me "Why use a `<dl>` and style it to look like a table?" and now you're doing exactly the same (and semantically much more worse) with an `<ul>`. Impressive.

BalusC 2009-12-10 13:54:31

Yeah, I did ... if you read what I've written in my answer ... I think this solution would work better for what the guy is trying to achieve, better that a `<dl>` anyway

Jonny Haynes 2009-12-10 14:07:34

Answer 5

+4 A:

This argument is getting a little daft... Nobody seems to be suggesting that tables are used for layout without semantic meaning, only that the example data provided is tabular and therefore should be displayed in a table. So I can't see the point of posting links about table layout when it is clear that everyone taking part in this debate moved past that years ago.

As BalusC says, the data could quite correctly be displayed in a definition list. It certainly produces more elegant markup, but whether it is more semantically correct is (obviously, from this discussion) debatable. I know of no definition of tabular data that precludes this use, including the OED! Thus using a table for this data is, as prodigitalson says, also fully valid.

Robert Grant - could you provide a link that defines a table as data that requires two labels to identify it? I'm not aware of this definition, but I am willing to learn. I am a little confused as to how using spans in a div is more semantically valid than a table though. Or how it is in any way semantic. Both are meaningless tags.

The markup used must establish the relationship between the key-value pairs. Only a table or dl can do this.

The example markup for the table is pretty sound (as there is no need for a thead btw, the tbody tag is not really necessary as there are no other elements of the table to differentiate). A scope="row" on the tags is necessary for screen readers though, in addition to the caption.

Having said all this, the whole point here is to help someone solve a problem. The nature of that problem would tend to indicate that garj is not an advanced front end developer and that their css skills may not be at the highest standard yet. To me, this means that using a tabular solution is preferable. Styling a dl in a way which degrades gracefully in any browser with a substantial market share is not a trivial task by any means.

Martin Smith 2009-12-09 17:15:47

Well said that man!

Jonny Haynes 2009-12-10 08:08:59

I'd be curious to know what you'd define as "tabular data". And not "well, it's data that I put in a table".

Robert Grant 2009-12-10 14:02:09

E.g. http://www.webdesignfromscratch.com/html-css/html-tables.php : **HTML tables should only be used for rendering data that belongs naturally in a grid**, in other words where the data describe a number of objects that have the same properties.

Robert Grant 2009-12-10 14:05:57

And while divs/spans may not be any more semantically correct than a table, they are technically cheaper to render, and infinitely more flexible when it comes to restyling.

Robert Grant 2009-12-10 14:09:14

It takes more effort to style anything other than a table to look like a table

Jonny Haynes 2009-12-10 14:13:36

Are there any other reasons than that one?

Robert Grant 2009-12-10 14:35:35

ansaurus

tags:

views:

answers:

css two column list with balanced column height

related questions