HTML/CSS: column-like layout for list elements

Question

I have a list () in a table cell which elements contain a label ("data descriptor") and a span that contains the data. See php code below:

...
echo '<li><label>Trade Name</label><span>' . $row['TRADE_NAME'] . '</span></li>';
echo '<li><label>Company</label><span>' . $row['COMPANY'] . '</span></li>';
echo '<li><label>Synonyms</label><span>' . $row['ALL_SYNONYMS'] . '</span></li>';
...

The problem now is that if the text in a span is too long it will "overflow to the next line" and is displayed directly below the label:

Trade Name  XYZ
Company     ABC
Synonyms    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx

I would like it to look like this:

Trade Name  XYZ
Company     ABC
Synonyms    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
            xxxxxxxxxxxxxxxxx

A Problem is that this list is in a table cell. divs are as far as I know not allowed in table cells? are lists? How can I solve above issue?

EDIT:

Using a dl leads to following issue if a value is emtpy/null:

Trade Name  XYZ
Company    Synonyms xxxx

-> 2 dt elemtns are displayed on the same line.

if it is tabular data, go use tables. recreating table functionality using divs is just plain wrong. — corroded
– corroded, Commented May 26, 2011 at 6:59
See my comment below. It a lot of columns with a lot of long textual data. Can't be displayed nicely in a standard table using a standard resolution screen. I tried that first and it is unusable. — beginner_
– beginner_, Commented May 26, 2011 at 8:34

Henrik Erlandsson · Accepted Answer · 2011-05-26 07:16:10Z

1

Must it be li's? Why not create further table-cell-levels in the table? Lots of tables have subdivided cells. (In your code, replace li with tr and the label and span with td's, and wrap it in a table.)

As a secondary solution, I would drop the li's and labels and use two spans, with class="floatleft" for the first one and class="floatright" for the second one. Then just style those classes with td span.floatleft {display:block;float:left;} (and similarly for the other span). You would probably have to at minimum set a width for the left one, I don't think it needs a height.

edited May 26, 2011 at 7:16

answered May 26, 2011 at 6:56

Henrik Erlandsson

3,8355 gold badges46 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mu is too short · Accepted Answer · 2011-05-26 07:19:11Z

0

That layout looks like a table to me so I'd use a table for it:

<table>
    <tbody>
        <tr>
            <td>Trade</td>
            <td>Name XYZ</td>
        </tr>
        <tr>
            <td>Company</td>
            <td>ABC</td>
        </tr>
        <tr>
            <td>Synonyms</td>
            <td>xxxxxx xxxxxx xxxxxx xxxxxxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxx</td>
        </tr>
    </tbody>
</table>

But, if you don't want to use a table and don't mind manually sizing things, you can do it with a definition list:

<dl>
    <dt>Trade</dt><dd>Name  XYZ</dd>
    <dt>Company</dt><dd>ABC</dd>
    <dt>Synonyms</dt><dd>xxxxxx xxxxxx xxxxxx xxxxxxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxx</dd>
</dl>

And then some CSS:

dt {
    float: left;
    width: 100px;
}
dd {
    margin-left: 100px;
}

And an example of both approaches: http://jsfiddle.net/ambiguous/RftDM/

answered May 26, 2011 at 7:19

mu is too short

436k71 gold badges863 silver badges822 bronze badges

3 Comments

beginner_ Over a year ago

I can't do it in a table because there are more than just the 3 rows and they contain a lot of textual data. Hence it can't be displayed "row-wise" usefully on a standard resolution screen. above works but a new issue occurs, namely if a a value is empty/null then the next label (dt-element is displayed on the same line as the previous one(see edited start post).

mu is too short Over a year ago

@beginner_: You could use the non-breaking space trick for empty <dd> elements: if there's nothing to put in it, just use <dd> </dd> instead. That hack will preserve the layout when you're faced with empties. The   is just there to give the <dd> a height in the empty case, there are other ways but   is simple and reliable.

beginner_ Over a year ago

I set min-height: 2em for both dt and dd and that works. Also makes it look nicer too. ;)

user1953637 · Accepted Answer · 2013-01-07 08:13:54Z

    <div class="container">
    <div class="spacer">
      &nbsp;
    </div>

    <div class="float">
      <img src="image1.gif" width="100" height="100"
      alt="image 1" /><br />
      <p>caption 1</p>
    </div>

    <div class="float">
      <img src="image2.gif" width="100" height="100"
      alt="image 2" /><br />
      <p>caption 2</p>
    </div>

    <div class="float">
      <img src="image3.gif" width="100" height="100"
      alt="image 3" /><br />
      <p>caption 3</p>
    </div>

    <div class="spacer">
      &nbsp;
    </div>

    </div>

div.spacer {
  clear: both;
  }
div.container {
  border: 2px dashed #333;
  background-color: #ffe;
  }

Another one

div.float {
  float: left;
  }

div.float p {
   text-align: center;
   }

And the HTML:

<div class="float">
  <img src="image1.gif" width="100" height="100"
  alt="image 1" /><br />
  <p>caption 1</p>
</div>

<div class="float">
  <img src="image2.gif" width="100" height="100"
  alt="image 2" /><br />
  <p>caption 2</p>
</div>

<div class="float">
  <img src="image3.gif" width="100" height="100"
  alt="image 3" /><br />
  <p>caption 3</p>
</div>

Collectives™ on Stack Overflow

HTML/CSS: column-like layout for list elements

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related