Basically what I want is three columns. A number in the left column, some right-aligned text on the right, and the stuff in the middle is a hyperlink. This is designed for touch screen (iPhone), so it is really important that the clickable area for the hyperlink reach all the way across, at least to the text on the right. Right now it all looks right, but the clickable area is just over the text in the middle column.
I can sort-of accomplish what I want with padding, but then when I do have longer text in the middle it starts wrapping and leaving a big blank space between the middle and right columns.
Obviously I'm a beginner with CSS. I'm amazed at how difficult this apparently is. I must be missing something.
I'm starting to get the urge to brute force it with a table but I hear those are slow, bad, and unnecessary.
Thanks! I'm further along now, but now I can't figure out why my text isn't wrapping around my float (instead my float block moves down to make room for the text). I've wrapped the <a> tag around the middle and right columns (I realized that's really what I need), and the right column is float: right. When there is alot of text in the middle column, I was hoping it would wrap, but instead the right column moves down to make room for it and it looks bad. Any pointers on how to get the right column to stay put?
If you put your right column in front of your middle column in the code it should stay stuck to the top: <a href="#"><span class="col3">lmnop</span><span class="col2">abcdefg abcdefg abcdefg abcdefg</span></a>