CSS Help

cascade

It’s that time, once again, when I can’t figure out how to do something with CSS and I need your help. I’ve created a full description of the problem and examples of solutions I’ve tried.

The long and short of it is that I have a control that writes messages to the screen. I am currently using an unordered list to render these messages, but I want to format them at the top & center of the screen. I want each message to be on it’s own line, and I want all of the messages to be encapsulated by a solid rectangular background. I want the solid rectangular background to be only as wide as it needs to be in order to encapsulate the widest message.

I’ve been able to accomplish this with a table, but that’s just semantically wrong.

Please check out the examples and let me know how you would solve this problem.

Update

Evdawg posted a solution that works cross-browser! I’ve updated the examples with his working version.

Update 2

Inky posted another kickass center-float solution that also works cross-browser. I’ve added that one to the examples as well.