CODEWITHSUNDEEP
htmlcss
beginner_
beginner_

Reputation: 331

HTML/CSS: column-like layout for list elements

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.

Upvotes: 0

Views: 1063

Answers (3)

user1953637
user1953637

Reputation: 21

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

Upvotes: 0

mu is too short
mu is too short

Reputation: 434665

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/

Upvotes: 0

Henrik Erlandsson
Henrik Erlandsson

Reputation: 3831

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.

Upvotes: 1

Related Questions