Dynamic width of absolute positioned element
 

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>

Re: Dynamic width of absolute positioned element
 

"mike eli" <michaelelias88@hotmail.com> skrev i en meddelelse
news:5954e2a4.0409010830.75f76073@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

Re: Dynamic width of absolute positioned element
 

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.

Re: Dynamic width of absolute positioned element
 

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 :)