Double backgrounded div - how to center it?

float center, centering a div with two backgrounds

[mihai2u]

Hi,

the only way I can "apply" two backgrounds on a box that is as wide as the text inside it, is by floating it... and using the next code:

HTML:
<p class="doublebackground"><em></em>Content text</p>

CSS:

p.doublebackground {
background:url(back.gif);
height:30px;
}

p.doublebackground em {
background:url(left.gif) left no-repeat;
width:10px;height:30px;
position:relative;left:-19px;
float:left;
}

Is there a possibility to center it?
While using float, it seems impossible to me to do that.
Can I use other methods for applying double backgrounds on such "boxes"?

Any ideeas?

[scriptmasterdel]

Hi, If you would like to apply more then one background then you will need to contain a box inside a box and then assign the background images in order of position.

<div class="mainBackground">
<div class="secondBackground">
This is the content of both containers
</div>
</div>

Then assign the CSS as you need to each container.


Del

[mihai2u]

The problem is not how to apply two backgrounds, but how to make that "double-backgrounded" div to be able to change it's size with respect to the amount of text found into it.

The only way i succeeded in doing this is setting manually from the CSS a width for the outer box, and everything was ok.
But is there any "better" ways of doing this?

I've tried many things, like centering the alignment for a paragraph, putting an empty <b> before the <span> containing the text, and an empty <em> after the <span>, and applying different backgrounds to these three elements, but this does not let me to use background images with the height bigger than.. 8-9px