best way to lay out this text?

Question

trying to refresh my memory of some css stuff having been ot of things for a while, can anyone recommend the best approach to achieve this layout

http://www.flickr.com/photos/62570778@N04/5709752069/

is iit better to create lists or float headings etc?

Thanks

Is the data being fed into this layout? – tahdhaze09 May 11 '11 at 15:02 — tahdhaze09, May 11 '11 at 15:02

score 4 · Answer 1 · answered May 11 '11 at 14:49

4

Semantically it matches a definition list -

<dl>
  <dt>
    Name
  </dt>
  <dd>
    MyName
  </dd>
</dl>

With CSS to style each part how you want.

answered May 11 '11 at 14:49

Dan Brown

111
1
1
6

+1 for the not-oft used definition list. It could also be tabular data, hence a table. – tahdhaze09 May 11 '11 at 15:02

score 2 · Answer 2 · answered May 11 '11 at 14:50

2

you can use <table>

<table>
<tbody>
<tr><td>Name</td><td>My Name</td></tr>
<tr><td>Age</td><td>21</td></tr>
<tr><td>Gender</td><td>Male</td></tr>

</tbody>


</table>

answered May 11 '11 at 14:50

DrStrangeLove

11,227
16
59
72

afranz409 · Accepted Answer · 2011-05-11T17:12:24.420

I would probably suggest using a series of div's. The outer most defining a box around your entire list, and one for each row. The inner ones floated left/right as appropriate (one for each column).

Something like:

<div class="list">
    <div class="row">
        <span class="col1">Name</span>
        <span class="col2">My Name</span>
    </div>
    <div class="row">
        <span class="col1">Age</span>
        <span class="col2">21</span>
    </div>
    <div class="row">
        <span class="col1">Gender</span>
        <span class="col2">Male</span>
    </div>
</div>

With css something like:

.list {
  width: 50em;
  overflow: auto;
}

.row {
  overflow: auto;
  margin-bottom: 2em;
  border-bottom-width: 1px;
  border-bottom-style: solid; 
}

.col1 {
  float: left;
  max-width: 23em;
}

.col2 {
  float: right;
  width: 25em;
}

A few random comments about your answer: `float: left` (or `right`) [forces `display: block`](http://stackoverflow.com/questions/5854463/jquery-in-chrome-returns-block-instead-of-inline/5854523#5854523), so you don't need `display: inline`. You'd also be better using `` tags instead of `
` tags for `.col1`/`.col2`. You don't need `display: block` on `.row` because `div` elements default to that. — thirtydot, May 11 '11 at 15:02

score 1 · Answer 4 · answered May 11 '11 at 14:54

1

You could also try:

<ul>
<li>Name<span>value</span></li>
<li>Age<span>value</span></li>
<li>Gender<span>value</span></li>
</ul>

with

span {
  float: right;
}
li {
 width:100px;
}

answered May 11 '11 at 14:54

kei

20,157
2
35
62

best way to lay out this text?

4 Answers4