Aligning text without a <table>

[Sandd]

I'm using a two column CSS on a site that has columns of info. That line up similar to the below text. (It doesn't show exactly right here since this editor used fixed-spaced fonts.

BU8 Team Name
BU9 Team Name
BU10 Team Name
GU8 Team Name
GU9 Team Name
GU10 Team Name

The first column is separated by 2 spaces before the next. Is there a way to make the second column line up without using a table?

I've tried every position element I know of without success.

Thanks!

[alexdunae]

You might be best putting it in a definition list.

In your HTML file:

<dl class="teams"> 
 <dt>BU8</dt> 
  <dd>Team Name</dd> 
 <dt>BU9</dt> 
  <dd>Team Name</dd> 
</dl> 

And in your CSS file:

.teams dt { clear: left; float: left; width: 100px; } 

[Sandd]

Perfect! THANK YOU!

I guess I need an HTML refresher, I didn't think about using those tags. Doh!

[encyclo]

Welcome to WebmasterWorld Sandd! Using a definition list is a good idea, but using a table is, in my opinion, just as valid. From the example given, it looks very much like tabular data so there is no reason to avoid a table.

Tables are not ideal for layout purposes, but they are perfect for tabular data. Like the definition list, you can establish relationships between the data in each table cell: see the thread Accessible tables [webmasterworld.com] in the Accessibility and Usability forum [webmasterworld.com] for some guidelines on how to make the table work well. :)