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

Answer 1

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