H2 auto tag width?

I was wondering if anyone out there knew a CSS method on how to have the width of an h2 tag automatically adjust to the size of the text contents.

So that if I have a 500 pix el wide container, but only a few words in the title (such as) "Text Width" and I had a background color for the h2 tag, the back ground color would only extend as far as the text (and any padding), rather than taking up the whole 500px width.

I've done a bit of hunting online, but have yet to find anything.

 

You can't, use the span tag.

 

Absolute positioned elements and float elements shrink-wrap their content.

#flot {
  float: left;
  background-color: yellow;
  }

#ap {
  position: absolute;
  background-color: yellow;
  }

h1 span {
  background-color: yellow;
  }
=========
<h1 id="flot">header</h1>

<h1 id="ap">header</h1>

<h1><span>header</span></h1>

Code (markup):

should all give the same result, with allowance for prerequisites, effect on surrounding elements and browser anomalies (IE screw-ups, mostly).

cheers,

gary

 

while he is quite correct, using the span element is far simplier.

 

Thank you both ever so much for your input. I'll start experimenting with this code ASAP.

 

Okay. I just tried some things out and while span does indeed work, the padding bumps up and over the border I'm using it with LIBA's Beta Page

The green "Liba News" tab is an image. I'm trying to get the same effect for "Mission Statement" using a background, and a smaller image (the little fold over tab image used as the background image over the background color) in an attempt to pull as much of the information out of the images and into text as possible, making the page easier to use for site-impaired readers, improve loading time, improve the readability for search engines, ect.

I'll try the absolute positioning method next.

 

Okay, absolute positioning was a bust due to the fact that the text that came after the H2 just sunk in behind it, and even if I were to put a margin at the top of the following content, I doubt things would scale well with text size changes.

I think I'll try the float method, with a containing div to auto-clear the float, and see how that works.

 

The float fixed it, but a containing div didn't automatically clear the float inside of it like it's done on most of my pages, so I added a clearing element to the block quote below, and all of that worked... except for the odd fact that the 1 em margin at the top of the paragraphs inside of the block quote aren't present in Firefox, but still are present in IE.