Absolute/relative positioning of div's

Discussion in 'HTML' started by Sentient Fluid, Sep 1, 2004.

  1. I'm curious if it's possible to center a (container) div in the middle
    (vertically & horizontally) of a page and have any div's inside keep
    their position relative to (container) div.

    As I learn better if I do it myself, can anyone provide a link (or
    links) to helpful, easy to understand (layman's terms would be good)
    info online? I'm having trouble finding it myself.

    Thanks

    ~Senti
    Sentient Fluid, Sep 1, 2004
    #1
    1. Advertising

  2. Sentient Fluid

    Spartanicus Guest

    Sentient Fluid <> wrote:

    >I'm curious if it's possible to center a (container) div in the middle
    >(vertically & horizontally) of a page and have any div's inside keep
    >their position relative to (container) div.


    http://www.spartanicus.utvinternet.ie/test/senti.htm

    --
    Spartanicus
    Spartanicus, Sep 1, 2004
    #2
    1. Advertising

  3. Spartanicus wrote:
    > Sentient Fluid <> wrote:
    >
    >
    >>I'm curious if it's possible to center a (container) div in the middle
    >>(vertically & horizontally) of a page and have any div's inside keep
    >>their position relative to (container) div.

    >
    >
    > http://www.spartanicus.utvinternet.ie/test/senti.htm
    >


    Thanks. I took a quick look at it. Assuming I don't want the container
    div to resize, I could just do the following:

    div#container{position:absolute;top:25%;left:25%;width:450px;height:450px;border:2px
    solid red}

    And for the div's in the container, if I wanted them to stay in the
    upper and lower right corner's of the container I could just add left,
    top, width, height px values and all would be well?

    I'd check it out, but I'm replying right before heading out and I'm not
    sure when I'll be able to get to it, next.

    One more question... is it all cross-browser compatible?

    Thanks again!

    ~Senti
    Sentient Fluid, Sep 3, 2004
    #3
  4. Sentient Fluid

    Spartanicus Guest

    Sentient Fluid <> wrote:

    >>>I'm curious if it's possible to center a (container) div in the middle
    >>>(vertically & horizontally) of a page and have any div's inside keep
    >>>their position relative to (container) div.

    >>
    >> http://www.spartanicus.utvinternet.ie/test/senti.htm

    >
    >Thanks. I took a quick look at it. Assuming I don't want the container
    >div to resize, I could just do the following:
    >
    >div#container{position:absolute;top:25%;left:25%;width:450px;height:450px;border:2px
    >solid red}


    That won't work.

    http://www.spartanicus.utvinternet.ie/test/senti2.htm
    Note that this requires a standard compliant browser, there's no way to
    achieve this in IE.

    >And for the div's in the container, if I wanted them to stay in the
    >upper and lower right corner's of the container I could just add left,
    >top, width, height px values and all would be well?


    Nope, I don't know what you are striving for, I'm guessing that you want
    shrink to fit behaviour from the divs in the box:
    http://www.spartanicus.utvinternet.ie/test/senti3.htm
    Note that again this requires a standard compliant browser, there's no
    way to achieve this in IE.

    --
    Spartanicus
    Spartanicus, Sep 3, 2004
    #4
  5. Spartanicus wrote:
    > Sentient Fluid <> wrote:
    >
    >
    >>>>I'm curious if it's possible to center a (container) div in the middle
    >>>>(vertically & horizontally) of a page and have any div's inside keep
    >>>>their position relative to (container) div.
    >>>
    >>>http://www.spartanicus.utvinternet.ie/test/senti.htm

    >>
    >>Thanks. I took a quick look at it. Assuming I don't want the container
    >>div to resize, I could just do the following:
    >>
    >>div#container{position:absolute;top:25%;left:25%;width:450px;height:450px;border:2px
    >>solid red}

    >
    >
    > That won't work.
    >
    > http://www.spartanicus.utvinternet.ie/test/senti2.htm
    > Note that this requires a standard compliant browser, there's no way to
    > achieve this in IE.
    >
    >
    >>And for the div's in the container, if I wanted them to stay in the
    >>upper and lower right corner's of the container I could just add left,
    >>top, width, height px values and all would be well?

    >
    >
    > Nope, I don't know what you are striving for, I'm guessing that you want
    > shrink to fit behaviour from the divs in the box:
    > http://www.spartanicus.utvinternet.ie/test/senti3.htm
    > Note that again this requires a standard compliant browser, there's no
    > way to achieve this in IE.


    Actually I don't want shrink to fit at all. I want a set width and
    height for the divs in the box. I'd like them on the right side of the
    box, and taking up about 1/3 of the width and, combined, the total
    height of the box.

    Something along the lines of this (all boxes static in size):
    ________________________
    | ________ |
    | | ||
    | | ||
    | | ||
    | |_______||
    | ________ |
    | | ||
    | | ||
    | | ||
    | |_______||
    |_______________________|

    The whole needs to be centered horizontally on the screen. Thinking on
    it, vertical centering probably isn't necessary.

    Looking at sample 2, all I'd need to do then is remove the div#wrapper?

    And thanks again for all the help. :)

    ~Senti
    Sentient Fluid, Sep 4, 2004
    #5
  6. Sentient Fluid

    Spartanicus Guest

    Sentient Fluid <> wrote:

    >Something along the lines of this (all boxes static in size):
    >________________________
    >| ________ |
    >| | ||
    >| | ||
    >| | ||
    >| |_______||
    >| ________ |
    >| | ||
    >| | ||
    >| | ||
    >| |_______||
    >|_______________________|
    >
    >The whole needs to be centered horizontally on the screen. Thinking on
    >it, vertical centering probably isn't necessary.


    http://www.spartanicus.utvinternet.ie/test/senti4.htm

    Note that I've not included the hacks to get around the flaws of IE5.5
    and lower.

    --
    Spartanicus
    Spartanicus, Sep 4, 2004
    #6
  7. Spartanicus wrote:
    > Sentient Fluid <> wrote:
    >
    >
    >>Something along the lines of this (all boxes static in size):
    >>________________________
    >>| ________ |
    >>| | ||
    >>| | ||
    >>| | ||
    >>| |_______||
    >>| ________ |
    >>| | ||
    >>| | ||
    >>| | ||
    >>| |_______||
    >>|_______________________|
    >>
    >>The whole needs to be centered horizontally on the screen. Thinking on
    >>it, vertical centering probably isn't necessary.

    >
    >
    > http://www.spartanicus.utvinternet.ie/test/senti4.htm
    >
    > Note that I've not included the hacks to get around the flaws of IE5.5
    > and lower.


    Thanks, again. I've got the code but I won't be able to check it out
    until after the long weekend.

    Have a good one!

    ~Senti
    Sentient Fluid, Sep 4, 2004
    #7
    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,650
    Rob R. Ainscough
    Feb 7, 2006
  2. Fred Nelson
    Replies:
    1
    Views:
    2,448
    Christopher Reed
    Feb 21, 2006
  3. Vernon Compton
    Replies:
    10
    Views:
    4,727
    Adrian Wood
    Mar 2, 2004
  4. Chris
    Replies:
    10
    Views:
    1,087
    Chris
    Mar 1, 2004
  5. KatB
    Replies:
    8
    Views:
    4,175
Loading...

Share This Page