Positioning absolute CSS in a relative DIV

Discussion in 'HTML' started by Chris, Mar 1, 2004.

  1. Chris

    Chris Guest

    Hi,

    I am trying to position a couple of absolutely positioned elements in a
    container which is relatively positioned. The problem is that the relative
    container they are located in does not 'stay open' and the content within it
    cannot be seen. I wanted the page to be fluid so that if content was added
    the container would auto resize and footer would remail at the bottom.

    I hope this makes sense?

    Any comments would be appreciated.

    Thanks,

    Chris.
     
    Chris, Mar 1, 2004
    #1
    1. Advertising

  2. Chris

    Els Guest

    Chris wrote:

    > Hi,
    >
    > I am trying to position a couple of absolutely positioned elements in a
    > container which is relatively positioned. The problem is that the relative
    > container they are located in does not 'stay open' and the content within it
    > cannot be seen. I wanted the page to be fluid so that if content was added
    > the container would auto resize and footer would remail at the bottom.
    >
    > I hope this makes sense?


    Without a url, I can only guess, but it sounds like you
    didn't give a height to the container div.
    The elements inside it which are abolutely positioned, are
    taken from their normal flow, and therefore don't occupy any
    space, really, so the container will not auto resize when
    adding more abolutely positioned elements.

    --
    Els

    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Mar 1, 2004
    #2
    1. Advertising

  3. Chris

    Chris Guest

    You are right in the sense that I dont have the height set in the holder. I
    didn't want to set this value because people (who are notntrained in web
    development) will be editing the page. I don't want them to have to edit the
    CSS file. Can you think of any ways in which I can achieve this without
    setting a height attribute?

    Thanks.

    "Els" <> wrote in message
    news:40431d79$0$41765$...
    > Chris wrote:
    >
    > > Hi,
    > >
    > > I am trying to position a couple of absolutely positioned elements in a
    > > container which is relatively positioned. The problem is that the

    relative
    > > container they are located in does not 'stay open' and the content

    within it
    > > cannot be seen. I wanted the page to be fluid so that if content was

    added
    > > the container would auto resize and footer would remail at the bottom.
    > >
    > > I hope this makes sense?

    >
    > Without a url, I can only guess, but it sounds like you
    > didn't give a height to the container div.
    > The elements inside it which are abolutely positioned, are
    > taken from their normal flow, and therefore don't occupy any
    > space, really, so the container will not auto resize when
    > adding more abolutely positioned elements.
    >
    > --
    > Els
    >
    > Sonhos vem. Sonhos vão. O resto é imperfeito.
    > - Renato Russo -
    >
     
    Chris, Mar 1, 2004
    #3
  4. Chris

    Eric Bohlman Guest

    "Chris" <> wrote in news:c1v640$5vj$:

    > I am trying to position a couple of absolutely positioned elements in
    > a container which is relatively positioned. The problem is that the
    > relative container they are located in does not 'stay open' and the
    > content within it cannot be seen. I wanted the page to be fluid so
    > that if content was added the container would auto resize and footer
    > would remail at the bottom.


    A URL would be helpful, but in its absence I'm going to guess that you're
    overlooking the fact that absolutely-positioned elements don't occupy any
    space in the layout flow of their containers; the container is laid out as
    if its absolutely-positioned children didn't even exist. Therefore, it
    won't "open up" to fit the children unless you explicitly call for extra
    space, usually by setting margins.
     
    Eric Bohlman, Mar 1, 2004
    #4
  5. Chris

    Els Guest

    Chris wrote:

    > You are right in the sense that I dont have the height set in the holder. I
    > didn't want to set this value because people (who are notntrained in web
    > development) will be editing the page. I don't want them to have to edit the
    > CSS file. Can you think of any ways in which I can achieve this without
    > setting a height attribute?
    >
    > Thanks.
    >
    > "Els" wrote:
    >
    >>Chris wrote:
    >>
    >>>Hi,
    >>>
    >>>I am trying to position a couple of absolutely positioned elements in a
    >>>container which is relatively positioned. The problem is that the relative
    >>>container they are located in does not 'stay open' and the content within it
    >>>cannot be seen. I wanted the page to be fluid so that if content was added
    >>>the container would auto resize and footer would remail at the bottom.
    >>>
    >>>I hope this makes sense?

    >>
    >>Without a url, I can only guess, but it sounds like you
    >>didn't give a height to the container div.
    >>The elements inside it which are abolutely positioned, are
    >>taken from their normal flow, and therefore don't occupy any
    >>space, really, so the container will not auto resize when
    >>adding more abolutely positioned elements.

    >
    > You are right in the sense that I dont have the height set in the holder. I
    > didn't want to set this value because people (who are notntrained in web
    > development) will be editing the page. I don't want them to have to edit the
    > CSS file. Can you think of any ways in which I can achieve this without
    > setting a height attribute?


    (toppost corrected)

    Yes: get rid of absolute positioning, use floats instead.
    (with a clearance element at the bottom of the container
    div, to make it stretch to hold all the floating elements)

    --
    Els

    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Mar 1, 2004
    #5
  6. Chris

    Els Guest

    Els wrote:

    > (toppost corrected)


    Oops, not so corrected, that was, duplicated instead of
    moved the part. Sorry.

    --
    Els

    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Mar 1, 2004
    #6
  7. Chris

    Chris Guest

    Maybe this will help!

    http://www.garrod.co.uk/csstest/

    You can see how the page is constructed. I have made the header etc and now
    have Main div which I want to have flexible layouts. So for instance I
    would like 2 cloums etc etc. The BG image is on the main Div.

    Currently I have set the border of the second column to 220px so it clears
    the menu. If anyone has any otehr ideas of how this might be done using
    float I would love to hear them!

    Thanks

    Chris.

    "Eric Bohlman" <> wrote in message
    news:Xns949F443C69A4Debohlmanomsdevcom@130.133.1.4...
    > "Chris" <> wrote in news:c1v640$5vj$:
    >
    > > I am trying to position a couple of absolutely positioned elements in
    > > a container which is relatively positioned. The problem is that the
    > > relative container they are located in does not 'stay open' and the
    > > content within it cannot be seen. I wanted the page to be fluid so
    > > that if content was added the container would auto resize and footer
    > > would remail at the bottom.

    >
    > A URL would be helpful, but in its absence I'm going to guess that you're
    > overlooking the fact that absolutely-positioned elements don't occupy any
    > space in the layout flow of their containers; the container is laid out as
    > if its absolutely-positioned children didn't even exist. Therefore, it
    > won't "open up" to fit the children unless you explicitly call for extra
    > space, usually by setting margins.
    >
    >
     
    Chris, Mar 1, 2004
    #7
  8. Chris

    Eric Bohlman Guest

    "Chris" <> wrote in news:c1vigq$8t4$:

    > Maybe this will help!
    >
    > http://www.garrod.co.uk/csstest/
    >
    > You can see how the page is constructed. I have made the header etc
    > and now have Main div which I want to have flexible layouts. So for
    > instance I would like 2 cloums etc etc. The BG image is on the main
    > Div.
    >
    > Currently I have set the border of the second column to 220px so it
    > clears the menu. If anyone has any otehr ideas of how this might be
    > done using float I would love to hear them!


    You want to set a left margin, not a border, to move the second column
    over. Once you do that, you can drop the absolute positioning on the left
    column and float it left instead.
     
    Eric Bohlman, Mar 1, 2004
    #8
  9. Chris

    Chris Guest

    If I do that then this happens!

    www.garrod.co.uk/csstest

    Its frustrating!

    "Eric Bohlman" <> wrote in message
    news:Xns949F6052DA60ebohlmanomsdevcom@130.133.1.4...
    > "Chris" <> wrote in news:c1vigq$8t4$:
    >
    > > Maybe this will help!
    > >
    > > http://www.garrod.co.uk/csstest/
    > >
    > > You can see how the page is constructed. I have made the header etc
    > > and now have Main div which I want to have flexible layouts. So for
    > > instance I would like 2 cloums etc etc. The BG image is on the main
    > > Div.
    > >
    > > Currently I have set the border of the second column to 220px so it
    > > clears the menu. If anyone has any otehr ideas of how this might be
    > > done using float I would love to hear them!

    >
    > You want to set a left margin, not a border, to move the second column
    > over. Once you do that, you can drop the absolute positioning on the left
    > column and float it left instead.
     
    Chris, Mar 1, 2004
    #9
  10. Chris

    Eric Bohlman Guest

    "Chris" <> wrote in news:c1vl65$9d4$:

    > If I do that then this happens!
    >
    > www.garrod.co.uk/csstest
    >
    > Its frustrating!


    You need to put leftcol before maincol in your HTML. float: left means
    "float me to the left of what comes *after* me; a floated element won't
    float upwards. See rule 6 from section 9.5.1 of the CSS2 spec:

    "The outer top of an element's floating box may not be higher than the top
    of any line-box containing a box generated by an element earlier in the
    source document."
     
    Eric Bohlman, Mar 1, 2004
    #10
  11. Chris

    Chris Guest

    Thanks Eric!
    It works prefectly.

    Chris
    "Eric Bohlman" <> wrote in message
    news:Xns949F67F374564ebohlmanomsdevcom@130.133.1.4...
    > "Chris" <> wrote in news:c1vl65$9d4$:
    >
    > > If I do that then this happens!
    > >
    > > www.garrod.co.uk/csstest
    > >
    > > Its frustrating!

    >
    > You need to put leftcol before maincol in your HTML. float: left means
    > "float me to the left of what comes *after* me; a floated element won't
    > float upwards. See rule 6 from section 9.5.1 of the CSS2 spec:
    >
    > "The outer top of an element's floating box may not be higher than the top
    > of any line-box containing a box generated by an element earlier in the
    > source document."
     
    Chris, Mar 1, 2004
    #11
    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. Rob R. Ainscough
    Replies:
    2
    Views:
    1,685
    Rob R. Ainscough
    Feb 7, 2006
  2. Fred Nelson
    Replies:
    1
    Views:
    2,504
    Christopher Reed
    Feb 21, 2006
  3. Vernon Compton
    Replies:
    10
    Views:
    4,824
    Adrian Wood
    Mar 2, 2004
  4. Sentient Fluid

    Absolute/relative positioning of div's

    Sentient Fluid, Sep 1, 2004, in forum: HTML
    Replies:
    6
    Views:
    845
    Sentient Fluid
    Sep 4, 2004
  5. KatB
    Replies:
    8
    Views:
    4,230
Loading...

Share This Page