evenly spacing multiple line item text without using a table

Question

Hello, I'm trying to create an unordered list of <a>text1 text2 text3</a> elements, with a while loop. This list is then styled using #sidebar li a in my CSS.

My problem is that the text1, text2, text3 that is passed into each <a> element in my while loop can take on different lengths and I would like for them to be spaced equally like a table. However, I CANNOT use a table, because to format like a table, requires me to do this....

<li><a><tr><td>text1</td> <td>text2</td> <td>text3</td></tr></a></li>... 

and because of that, my CSS "background" image will repeat for EACH <td>, when I only want the background image ONCE for each <tr>...(using different style tags than shown below)

is there a way to change my while loop to space my text1,text2,text3 evenly like a table (without using a table) and maintain my CSS background image ONCE per each <li>? Any help would be INCREDIBLY appreciated!

my PHP file

while($row = mysql_fetch_assoc($result))
{      

echo "<ul id=\"sidebar\">";
echo "<li><a href=\"#\">" . $row['column1'] . " ". $row['column2']. " ". $row['column 3']."</a></li></ul>";
}

my CSS file

#sidebar li a {
background: url(../images/sidebar.gif) no-repeat 0px 0px;
}

Answer 1

Asfar as I understand your question, you want your LI elements to have a fixed width like TD in a table:

#sidebar li {
  float:left;
  width:33%; /* three columns with equal width */
}

Answer 2

while($row = mysql_fetch_assoc($result))
{      

echo "<ul id=\"sidebar\">;
echo "<li><a href=\"#\"><span class="psuedo-col">" . $row['column1'] . "</span> <span class="psuedo-col">". $row['column2']. "</span> <span class="psuedo-col">". $row['column 3']."</span></a></li></ul>";

}

Add <span>s around the content from the $row['...'], in order that the css has something to serve as a hook, and set an explicit width on those spans. Bearing in mind that if the content of the spans is too large it will either require an overflow rule (hidden, visible or auto) or your content will start to look odd.

As an example

span.psuedo-col {

display: inline-block;
width: 10em;
overflow: hidden;

}

Or you could use

`display: block;
/* other stuff */
float: left; /* or right, depending on your alignment requirements */

The floats, obviously, will take the contents of the spans out of the flow of the document, perhaps causing the <li> itself to collapse, sine it'll have no content.