Border minimally surrounding text using CSS

Question

How can I do this using CSS and HTML?

1. Bordered text surrounded by colored border
2. Bordered text's border minimally surrounds text
3. Bordered text has maximum width
4. Bordered text's border doesn't overlap neighboring elements

When rendered, it should look something like this:

For the border I'm using:

padding: 1.0em;
border-style: solid;
border-width: 2px;
background-color: #FFFFCC;
border-color:#E8E800;

If I apply the CSS to a <p>, then the border is as wide as the browser window. I want the border to only be as wide as the text (variable depending on the text size), so setting an absolute width using width doesn't work. I tried display:inline but that causes spacing issues with neighboring elements. I also tried applying the above CSS to a <span> contained within a <p>, but that doesn't work when the text is too long and wraps.

Answer 1

Have you tried experimenting with the CSS property called float? Specifying float: left causes the width of the containing element to adjust to the text - seems like a secondary effect but it works.

If you don't want the containing elements lining up, you can add <br /> tags or you can add "clear: both;" to the style.

I definitely think it's achievable - you just need to find the right combination of attributes/values.