CSS : Border Situation

[foolishone]

I put a border around a word and I set the margins and padding, but the border still extends across the central div, no matter how small I set the values. I want the border width to change with the amount of words that are in it, like always extend 1 or 2 em on either side of the word.

^fo

[Force Flow]

It would help if you posted the code

[foolishone]

Here's the actual page.

Attached is the HTML.

I haven't tried it on this page in particular, but nothing I have found/tried can make the box around the title, in this case "Boating" dynamic/relative in width to the text that is in it. It's either fixed width or extends across the entire, in this case cell, but also DIV's. Any way to also have it be a +/- a doxen pixels on either side always?

^fo

[catacon]

Try setting the width to 'auto'. Like: title { width: auto; }

That might do it.

[foolishone]

Made changes and uploaded, no difference.

^fo

[catacon]

Try in the style: table { width: auto; }

That might mess up some other stuff though.

[foolishone]

Where am I putting this?

The table is comprised of 2 columns. If I set the table width to auto, it is going to expand to fill the screen, taking everything with it.

That was my old template. This is my new template, that the solution will be used on. This contains no tables, all CSS. Same situation, how to make the width expand and contract relative to the contents.

CSS for the new template is here.

(The navigation up top is my other question.)

^fo

[catacon]

Actually, I believe auto adjusts the division to the biggest that it needs to be, not to fill the screen. Try not using:

PHP Code:

<p class="title">Title</p> 


Instead use:

PHP Code:

<span class="title">Title</span> 


The 'p' and 'title' styles may be interfering with each other.

[foolishone]

Made the change and uploaded it, and now it works perfectly, just as I wanted.

Thanks catacon!

(now on to the top navigation)

^fo