Css two column lists with balanced column height

Question

Css two column lists with balanced column height

I would like to create a list of 2 columns.

----------------------------------- price 1.5 ----------------------------------- description Some text about the product written here and will expand the height of this column ----------------------------------- availability Yes ----------------------------------- Feature Some feature about the product -----------------------------------

I use a list with a span tag inside each li to make the information embedded. But the problem is when the information becomes longer, as in the case of the description and function, the height of the column does not grow, and thus the text in the second row is hidden.

So, how do I make the left side column the same height as the right column, depending on the amount of text written?

+4

css

user1994764 Dec 9 '09 at 15:02

source share

4 answers

This argument becomes a little silly ... Nobody seems to suggest that tables be used for layout without meaning, only that the given example data is tabular and therefore should be displayed in the table. Therefore, I see no reason to post links to the table layout when it becomes clear that everyone who participated in this discussion went back years.

According to BalusC, data can be correctly displayed in the definition list. This, of course, produces a more elegant layout, but whether it will be more semantically correct is (obviously, from this discussion) debatable. I do not know the definitions of tabular data that preclude this use, including OED! Thus, using a table for this data, as prodigitalson says, is also perfectly acceptable.

Robert Grant - could you provide a link that defines the table as data, which requires two labels to identify it? I do not know this definition, but I am ready to learn. I am a bit confused as to how using spacing in a div is more semantically valid than a table. Or however semantic it may be. Both are meaningless tags.

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

The example markup for a table is quite simple (since there is no need for anad btw, the tbody tag is not needed, since there are no other table elements for differentiation). Screenshots require a screenshot = "string" for tags, but in addition to the caption.

Having said all this, the whole point here is to help someone solve the problem. The nature of this problem tends to indicate that garj is not an advanced front-end developer and that their css skills cannot be at the highest level. For me, this means using a table solution is preferable. Stacking dl in a way that gracefully degrades in any browser with a significant market share is by no means a trivial task.

+4

user228135 Dec 9 '09 at 17:15

source share

This will work better than <dl> , but is not semantically correct as <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 than <dl> because <li> acts like a wrapper and will contain <p> content. If you use <dl> , there will be no wrapper around the individual <dt> and <dd> s.

And when <p> expands, it will not break into the next <li>

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; }

0

Jonny haynes Dec 9 '09 at 16:16

source share

Here is my hit. Tested in Firefox 3 and IE7, so YMMV, but at least it will get worse.

 <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>

Css two column lists with balanced column height

More articles: