Mark O'Sullivan • is about to deliver a flogging from the miracle whip.

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.

A bit of help, if you please…

Check out this page, which contains a 200px wide div floated left, and a fieldset. Note how the fieldset is completely contained to the right of the div.

Now check out this page, which also contains a 200px wide div floated left, but instead of a fieldset, next it has a div. Note how the div goes behind the floated element all the way to the left side of the screen.

I was under the impression that (at least in Firefox) all elements are created equal, and that the fieldset in the first example must just have some styles applied (by the browser) to make it stay completely to the right of the floated div. I was hoping that I could somehow force the div in my second example to behave like the fieldset in the first example, but I can’t seem to figure out how to make that happen without forcing specific margins on the div.

Any ideas?