Dynamic width of absolute positioned element

[mike eli]

Hi,

I have several absolute positioned elements inside an absolute
positioned DIV.
I would like one of the nested elements to have a dynamic width. I set
it's left and right attributes to 5, so the the element should have a
width = parentWidth - 10; This is the desired behaviour, but it won't
work. I still have to specify a width or the element has a width of 0.
Setting the width to '100%' doesn't give me the desired effect; it
takes the width of the parent element. Can anybody help me? thanks.

ex.

<div style="position:absolute; left:20px; top:20px; width:200px;
height:200px; border:solid black 1px">
<div style="position:absolute; left:5px; top:0px; right:5px;
background-color:blue"></div>
</div>

[noone]

"mike eli" <mi************@hotmail.com> skrev i en meddelelse
news:59**************************@posting.google.c om...

Hi,

I have several absolute positioned elements inside an absolute
positioned DIV.
I would like one of the nested elements to have a dynamic width. I set
it's left and right attributes to 5, so the the element should have a
width = parentWidth - 10; This is the desired behaviour, but it won't
work. I still have to specify a width or the element has a width of 0.
Setting the width to '100%' doesn't give me the desired effect; it
takes the width of the parent element. Can anybody help me? thanks.

ex.

<div style="position:absolute; left:20px; top:20px; width:200px;
height:200px; border:solid black 1px">
<div style="position:absolute; left:5px; top:0px; right:5px;
background-color:blue"></div>
</div>

Hi Mike

Absolute positioning means absolute and not relative.
If you position som element with absolute positioning, the element
absolutely doesn't care about its parents position.
You need relative to do that.
And if your "left" is 5 and your "right" is 5, then of course your width
becomes 0, because you are setting the margins of the element.
So both your lft and right margins are 5, not much space in between there.
Go to www.w3schools.com and learn some more about html

happy coding
Robert

[Michael Winter]

On Thu, 2 Sep 2004 10:25:14 +0200, noone <1@2.3> wrote:

[snip]

Absolute positioning means absolute and not relative.
If you position som element with absolute positioning, the element
absolutely doesn't care about its parents position.

Actually, if you read the specification a little more closely, you'll see
that that isn't true.

An absolutely positioned block is "explicitly offset with respect to its
containing block" (9.6 - Absolute positioning). A relatively positioned
block is "laid out according to the normal flow" and "may be shifted
relative to this position" (9.4.3 - Relative positioning").

If you add content to the inner DIV in the OP's example, you'll see that
Opera and Mozilla display the elements as intended. IE, being crap as
usual, doesn't and I doubt it will without some kind of hack (CSS or
Javascript).

In any case, the first place to take this is to the stylesheet group:

comp.infosystems.www.authoring.stylesheets

If they can't find a solution, then perhaps a script solution is warranted.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[DU]

mike eli wrote:

Hi,

I have several absolute positioned elements inside an absolute
positioned DIV.
I would like one of the nested elements to have a dynamic width. I set
it's left and right attributes to 5, so the the element should have a
width = parentWidth - 10; This is the desired behaviour, but it won't
work. I still have to specify a width or the element has a width of 0.
Setting the width to '100%' doesn't give me the desired effect; it
takes the width of the parent element. Can anybody help me? thanks.

ex.

<div style="position:absolute; left:20px; top:20px; width:200px;
height:200px; border:solid black 1px">
<div style="position:absolute; left:5px; top:0px; right:5px;
background-color:blue"></div>
</div>

Setting simultaneously left and right absolute values to the inner div
does not make sense.

Better:

<div style="position:absolute; left:20px; top:20px; width:200px;
height:200px; border:solid black 1px">
<div style="position:absolute; left:5px; top:0px; width: 190px;
background-color:blue;"></div>
</div>

or

<div style="position:absolute; left:20px; top:20px; width:200px;
height:200px; border:solid black 1px">
<div style="position:absolute; left:2%; top:0px; width: 96%;
background-color:blue;"></div>
</div>

and here, MSIE 6 must be triggering standards compliant rendering mode
in order to render accordingly.

DU
--
The site said to use Internet Explorer 5 or better... so I switched to
Netscape 7.2 :)

[Thomas 'PointedEars' Lahn]

DU wrote:

mike eli wrote:

I have several absolute positioned elements inside an absolute
positioned DIV.
I would like one of the nested elements to have a dynamic width. I set
it's left and right attributes to 5, so the the element should have a
width = parentWidth - 10; This is the desired behaviour, but it won't
work. [...]
<div style="position:absolute; left:20px; top:20px; width:200px;
height:200px; border:solid black 1px">
<div style="position:absolute; left:5px; top:0px; right:5px;
background-color:blue"></div>
</div>
Setting simultaneously left and right absolute values to the inner div
does not make sense.

It makes perfect sense and works in working UAs like Gecko-based ones.
Read the specs before posting rubbish.
Better:
[...]
and here, MSIE 6 must be triggering standards compliant rendering mode
in order to render accordingly.

MSIE is junk. It does support neither the "right" nor the "bottom" CSS
property, and it does not have a standards compliant rendering mode. It
may have a mode that is called so, but that's it.

Besides, your From header does not contain an e-mail address which is a
violation of Internet/Usenet standards as well as disregarding of the
Netiquette and most certainly the Acceptable Use Policy of your service
provider. Consider yourself killfiled and most certainly a formal
complaint sent to your SP in case of recurrence.

PointedEars
--
Ever heard of error 18??... it's 18 inches from your screen.