best way to lay out this text?

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 h开发者_JAVA技巧eadings etc?

Thanks

---

Semantically it matches a definition list -

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

With CSS to style each part how you want.

---

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

---

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>

---

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