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]

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]

[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

 

[DU]

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