Border minimally surrounding text using CSS

Answer 1

sounds like a table to me... oh, I can see the comments and down votes coming already. "tables are only for tabular data"... Yeah, I know but they are also a qnd way of doing exactly what steve wants to do.

Answer 2

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.

Answer 3

You can get the highlighted paragraphs to minimally surround the text by making the highlighted paragraphs float left as block elements (<p> is by default). Then, get the paragraphs to clear:left to prevent them from stacking up horizontally.

The CSS:

.pars {
    /* this is used to prevent the last floating element 
    from causing issues below the paragraph (.pars) container */
    width: 100%;
    overflow: visible;
}
.pars p {
    clear: left;
    margin: 0 0 0.5em 0;
}
.pars .highlighted {
    float: left;
    padding: 1.0em;
    border-style: solid;
    border-width: 2px;
    background-color: #FFFFCC;
    border-color:#E8E800;
}

Your HTML:

<div class="pars">
   <p>Some paragraph text</p>
   <p class="highlighted">Some bordered text</p>
   <p class="highlighted">Some more bordered text</p>
   <p>Some very long bordered text blah blah blah 
   blah blah blah blah blah blah blah blah blah blah</p>
</div>

Answer 4

what about display:inline-block?

Answer 5

Just add

p.highlighted {
    float: left;
}

p {
    clear: both;
}

This will cause the highlighted paragraphs to only be as wide as required by their text, and will ensure that existing paragraphs never overlap horizontally with the highlighted ones.