I think what I need to ask is how can I do this without relative position and/or a table?
Hi,
I agree, you need to find another way to do that. It looks like you were giving the last span in the .c class a smaller offset value to account for the extra character of the “BusinessA B”. That will just leave you frustrated having to set offset values according to characters.
This could just be a simple UL with a floated span. Since floats must come first in the source for IE6/7 I would nest “Business?” in the span.
Then you could use text-align:right on the LI to position the % entries to the right. You could use a non-breaking space to keep them separated if css was off.
This could also be done with a DL (definition list) but some would disagree with that approach.
Here is an example with the floated span -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
<style type="text/css">
.biz {
width:240px;
margin:0;
padding:5px 0;
overflow:hidden;
list-style:none;
border:1px solid #C4C4C4;
font:600 12px/1.3 arial,helvetica,sans-serif;
}
.biz li {
float:left;
width:220px;
padding:0 10px;
text-align:right; /*align % entries to the right*/
color:#666;
}
.biz li span { /*bring the float 1st in source order*/
float:left;
color:#000;
}
</style>
</head>
<body>
<ul class="biz">
<li><span>Business A</span> 12.25%</li>
<li><span>Business B</span> 11.15%</li>
<li><span>Business CC</span> 5.35%</li>
</ul>
</body>
</html>