heading background increment with text

[magalh]

hi guys, i have a common situation where i have a:

<div style="width:600px;">

inside i have:

<h1> title </h1>

this is the heading css:

h1 {background: #16A2DD url("../images/titlearrow.jpg") bottom right no-repeat; height:30px;}

What happens is that the background of the heading goes all the way to the end of the div (600px) instead of being proportional to the title text.

I could give the width to the heading but that would be a problem when my client will change the title to something else.... longer or shorter.

I'm looking for a solution on how to have a background color incrementing with the text changes.

Thanks in advance...

[Big O(1)]

Since <h1> is a block element, it will take up 100&#37; of the available width. In this case, it's 600 pixels since its parent limits it to that width. You could manually code the width but then you would have to change it every time as you said.

Two options you have are:
1. Give it display: inline. If you do this you won't be able to give it a height anymore though. It will behave like <a> or <span>. I don't think you want this.
2. Give it display: inline-block. This gives you the best of both worlds. It will take up only as much width as the text is, and you can still give it a height, width, and other styling you could only apply to block elements. You might still need a line break after it though, because it is not taking up all the available width. This is your best option, although this will not work in IE6 or IE7, which accept inline-block only on naturally inline elements like anchor, image, and span.

[magalh]

Big O(1), thanks for the help, i had to use the "display: inline-block" and then add an extra <span style="display:block;"> for the next line of text.

I don't care much about IE6 or IE7 anymore so it worked out perfectly! thanks again