When hovering over truncated text, I display the full version of the text. The problem with this is that the div is then absolute, and therefore doesn't take up any space, ultimately screwing with the other results.

The bit about "text in first column will overlay text in second column" is not true

Yes, it actually does work. If you will copy the code I posted to a standalone page, then swap the columns (swap the <ul>s), you should be able to tell that the text from the left column overlays that in the right column. You may need to change the padding in the anchor from {padding:1px} to something like {padding-right:6px} or more to make the end of the text from the left column more obvious. It doesn't overlay the full width of the right column unless the text in the left column happens to be long enough to do that. After verifying that the overlay is really happening, comment out {position:relative} and :hover again and you will see that the text from the left column slides under the text in the right column.

If it does not work on your production page, then perhaps there is other code that is overriding the effect of position:relative.