[SOLVED] Repeating Background Help

[JustGotAQuestion]

I need to repeat an image on the x axis behind some text so that no matter how long the text is, the background with be exactly as long. The text will be called in by a database, so it is variable in length. But, i can't have the image run off past the text (my current problem).

 

Here is that i have (doesn't work, runs off too far to the right).

 

<div style="background-image:url(images/repeat.png); background-repeat:repeat-x;">Some text of variable length.</div>

 

How can i limit the repeat to just where the text is? I can't just use width:whatever; because the text is variable in length.

[ToonMariner]

this is due to the block level nature of your elements.

 

text should really go in a p tag but lets stick to what you have...

 

If you add float: left to your div style then it will only take up as much space as it needs - instead of filling the horizontal space available...

[JustGotAQuestion]

Awesome, this was the type of fix i was looking for.

 

One thing though: i have noticed that floating works differently in IE and Firefox. I am not sure if it will in this case or not, but is there another solution that doesn't involve floating?

 

If not, no worries. This works fine, thanks.

[JustGotAQuestion]

Actually, floating it did the job exactly. And by the way, i was using just the div to keep things simple. In reality, the text is within a <p> and the div surrounds everything. Anyways, its working perfectly, so thanks.