Click to See Complete Forum and Search --> : Problem with div & width & explorer


abuenog
07-25-2006, 12:00 PM
Hello,

I have a small problem with a div and I need some help. The question is:

I have two divs:

<div style="position: absolute; background-color: red">
<div style="position: relative; ">Test test test</div>
</div>

Where the background only is drawn where is the text. Now, I want to define a height in the div:

<div style="position: absolute; background-color: red; top:50">
<div style="position: relative; height:20px">Test test test</div>
</div>

But now the problem is in Internet explorer that the background is drawn with a 100% of width. If you see the two examples you will see what is the problem.
Is important to know that I can't define any with, because the text will be dynamic (can be different in different situations).

Any solution?

Thanks

abuenog
07-25-2006, 07:14 PM
any suggestion :( ?

Centauri
07-25-2006, 08:55 PM
Change your inner divs to spans.

Cheers
Graeme

abuenog
07-26-2006, 02:30 AM
Hello,

I can't change the div by span because this is a container of other divs.
This is an example that I want to do:

<style>

.dialog{
position: absolute;
}

.dialog .dialog-head{
position: relative;background-color: blue;height:25px;
}

.dialog .dialog-head-toolbar{
position:absolute; right: 0px; background-color: yellow;
}

.dialog .dialog-body{
position:relative;background-color: #4e7995;
}

</style>

<div class="dialog">
<div class="dialog-head">
<div class="dialog-head-toolbar">
<button>O</button>
<button>O</button>
</div>
<div class="dialog-head-mid">Title</div>
</div>
<div class="dialog-body">
Este texto no tiene ningún propósito razonable, ni aporta absolutamente<BR>
ningún dato en especial, ya que es un simple relleno. Podría bromear un poco, y r<BR>
eproducir el discurso de un político, un fragmento de la legisl<BR>
ación educativa o cualquier otro texto del mismo nivel de erudición, pero, pensándomelo <BR>
mejor, prefiero dejarlo en este inútil fluir de palabras huecas, que <BR>
no tiene ningún propósito razonable.
</div>

</div>

If you see this code in FireFox, it runs correctly, but in Explorer doesn't run.

Any suggestion or example to do this kind of layout?

Thanks