Dynamic width of absolute positioned element

Discussion in 'Javascript' started by mike eli, Sep 1, 2004.

  1. mike eli

    mike eli Guest

    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>
     
    mike eli, Sep 1, 2004
    #1
    1. Advertising

  2. mike eli

    noone Guest

    "mike eli" <> skrev i en meddelelse
    news:...
    > 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
     
    noone, Sep 2, 2004
    #2
    1. Advertising

  3. 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.
     
    Michael Winter, Sep 2, 2004
    #3
  4. mike eli

    DU Guest

    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 :)
     
    DU, Sep 2, 2004
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Parag Mahajan
    Replies:
    2
    Views:
    231
    Parag Mahajan
    Jun 3, 2006
  2. Pieter Van Waeyenberge
    Replies:
    1
    Views:
    195
    Pieter Van Waeyenberge
    Feb 9, 2004
  3. Markus Fischer
    Replies:
    3
    Views:
    151
    Markus Fischer
    Sep 8, 2004
  4. Hoss
    Replies:
    0
    Views:
    113
  5. Replies:
    5
    Views:
    155
Loading...

Share This Page