Nested Div. Height:100%. Does more than 100%

Discussion in 'HTML' started by celineusa@gmail.com, Nov 26, 2005.

  1. Guest

    Hi All,

    I am using CSS, and nested DIV.
    I have a container div which is set to height: 100%.
    On my page, inside my container div, I have many divs.
    On the top, I have a div for the logo with height:100px
    Under, I have my menu background on the left in another div that is
    supposed to take the rest of the page in height, and stretch if
    necessary. I fixed the height to 100%.
    However, the total height of the page now does 100%+100px
    How do I make my page do 100% and not 100%+100px?

    Thank you for any help!

    Celine
    , Nov 26, 2005
    #1
    1. Advertising

  2. Neredbojias Guest

    With neither quill nor qualm, quothed:

    > Hi All,
    >
    > I am using CSS, and nested DIV.
    > I have a container div which is set to height: 100%.
    > On my page, inside my container div, I have many divs.
    > On the top, I have a div for the logo with height:100px
    > Under, I have my menu background on the left in another div that is
    > supposed to take the rest of the page in height, and stretch if
    > necessary. I fixed the height to 100%.
    > However, the total height of the page now does 100%+100px
    > How do I make my page do 100% and not 100%+100px?


    Use padding-top:100px; for a sub-container div inside the container div
    and position the logo div absolutely (from outside).


    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Nov 26, 2005
    #2
    1. Advertising

  3. Guest

    Hey, thank you very much for the answer. The padding works, but it
    still adds a 100% under the 100px...

    Any other ideas?

    And also, if my body text is more than the page length, it will scroll
    down, but the menu will only stretch to a 100%, and not more.
    Any thoughts?

    Thanks,
    Celine


    Neredbojias wrote:
    > With neither quill nor qualm, quothed:
    >
    > > Hi All,
    > >
    > > I am using CSS, and nested DIV.
    > > I have a container div which is set to height: 100%.
    > > On my page, inside my container div, I have many divs.
    > > On the top, I have a div for the logo with height:100px
    > > Under, I have my menu background on the left in another div that is
    > > supposed to take the rest of the page in height, and stretch if
    > > necessary. I fixed the height to 100%.
    > > However, the total height of the page now does 100%+100px
    > > How do I make my page do 100% and not 100%+100px?

    >
    > Use padding-top:100px; for a sub-container div inside the container div
    > and position the logo div absolutely (from outside).
    >
    >
    > --
    > Neredbojias
    > Contrary to popular belief, it is believable.
    , Nov 28, 2005
    #3
  4. Neredbojias Guest

    With neither quill nor qualm, quothed:

    > Hey, thank you very much for the answer. The padding works, but it
    > still adds a 100% under the 100px...
    >
    > Any other ideas?


    The padding-top should be on the sub-con div which does _not_ have 100%
    height designated. Also, what dtd are you using? That could make a
    difference. It's best to use html 4.01 strict.

    >
    > And also, if my body text is more than the page length, it will scroll
    > down, but the menu will only stretch to a 100%, and not more.
    > Any thoughts?
    >
    > Thanks,
    > Celine
    >
    >
    > Neredbojias wrote:
    > > With neither quill nor qualm, quothed:
    > >
    > > > Hi All,
    > > >
    > > > I am using CSS, and nested DIV.
    > > > I have a container div which is set to height: 100%.
    > > > On my page, inside my container div, I have many divs.
    > > > On the top, I have a div for the logo with height:100px
    > > > Under, I have my menu background on the left in another div that is
    > > > supposed to take the rest of the page in height, and stretch if
    > > > necessary. I fixed the height to 100%.
    > > > However, the total height of the page now does 100%+100px
    > > > How do I make my page do 100% and not 100%+100px?

    > >
    > > Use padding-top:100px; for a sub-container div inside the container div
    > > and position the logo div absolutely (from outside).
    > >
    > >
    > > --
    > > Neredbojias
    > > Contrary to popular belief, it is believable.

    >
    >


    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Nov 28, 2005
    #4
  5. Guest

    Thank for the answer! I really appreciate.
    I am using
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    I can't use a strict DTD otherwise is messes up my menu (switching menu
    with pictures).
    Moreover, I tried not to set the height to 100%, but since it contains
    a background, it won't go to to the bottom of my page...
    Plus, if that maintext goes over the length of the page, my gradients
    on the side (in another div that starts from the top, and set to
    height:100%) stop at a 100%...
    I thought I was going to use DIV cause you can't set the table height
    to 100%, but I guess that I'll go back to tables!! lol

    Any thoughts?
    Thank you,
    celine

    Neredbojias wrote:
    > With neither quill nor qualm, quothed:
    >
    > > Hey, thank you very much for the answer. The padding works, but it
    > > still adds a 100% under the 100px...
    > >
    > > Any other ideas?

    >
    > The padding-top should be on the sub-con div which does _not_ have 100%
    > height designated. Also, what dtd are you using? That could make a
    > difference. It's best to use html 4.01 strict.
    >
    > >
    > > And also, if my body text is more than the page length, it will scroll
    > > down, but the menu will only stretch to a 100%, and not more.
    > > Any thoughts?
    > >
    > > Thanks,
    > > Celine
    > >
    > >
    > > Neredbojias wrote:
    > > > With neither quill nor qualm, quothed:
    > > >
    > > > > Hi All,
    > > > >
    > > > > I am using CSS, and nested DIV.
    > > > > I have a container div which is set to height: 100%.
    > > > > On my page, inside my container div, I have many divs.
    > > > > On the top, I have a div for the logo with height:100px
    > > > > Under, I have my menu background on the left in another div that is
    > > > > supposed to take the rest of the page in height, and stretch if
    > > > > necessary. I fixed the height to 100%.
    > > > > However, the total height of the page now does 100%+100px
    > > > > How do I make my page do 100% and not 100%+100px?
    > > >
    > > > Use padding-top:100px; for a sub-container div inside the container div
    > > > and position the logo div absolutely (from outside).
    > > >
    > > >
    > > > --
    > > > Neredbojias
    > > > Contrary to popular belief, it is believable.

    > >
    > >

    >
    > --
    > Neredbojias
    > Contrary to popular belief, it is believable.
    , Nov 28, 2005
    #5
  6. Neredbojias Guest

    With neither quill nor qualm, quothed:

    > Thank for the answer! I really appreciate.
    > I am using
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    > I can't use a strict DTD otherwise is messes up my menu (switching menu
    > with pictures).
    > Moreover, I tried not to set the height to 100%, but since it contains
    > a background, it won't go to to the bottom of my page...
    > Plus, if that maintext goes over the length of the page, my gradients
    > on the side (in another div that starts from the top, and set to
    > height:100%) stop at a 100%...
    > I thought I was going to use DIV cause you can't set the table height
    > to 100%, but I guess that I'll go back to tables!! lol
    >
    > Any thoughts?
    > Thank you,
    > celine


    Css isn't perfect, and sometimes tables are the better solution for a
    particular "problem". Perhaps if you post a url, I and others might get
    a better read on things.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Nov 29, 2005
    #6
  7. Guest

    thank you for your reply!!
    Finally, I changed my mind. I'm gonna keep working with divs, but I
    will forget about making the height 100%. So I'll see what I'll do
    instead!

    Thanks anyway!!

    Celine



    Neredbojias wrote:
    > With neither quill nor qualm, quothed:
    >
    > > Thank for the answer! I really appreciate.
    > > I am using
    > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    > > I can't use a strict DTD otherwise is messes up my menu (switching menu
    > > with pictures).
    > > Moreover, I tried not to set the height to 100%, but since it contains
    > > a background, it won't go to to the bottom of my page...
    > > Plus, if that maintext goes over the length of the page, my gradients
    > > on the side (in another div that starts from the top, and set to
    > > height:100%) stop at a 100%...
    > > I thought I was going to use DIV cause you can't set the table height
    > > to 100%, but I guess that I'll go back to tables!! lol
    > >
    > > Any thoughts?
    > > Thank you,
    > > celine

    >
    > Css isn't perfect, and sometimes tables are the better solution for a
    > particular "problem". Perhaps if you post a url, I and others might get
    > a better read on things.
    >
    > --
    > Neredbojias
    > Contrary to popular belief, it is believable.
    , Dec 8, 2005
    #7
  8. Guest

    thank you for your reply!!
    Finally, I changed my mind. I'm gonna keep working with divs, but I
    will forget about making the height 100%. So I'll see what I'll do
    instead!

    Thanks anyway!!

    Celine



    Neredbojias wrote:
    > With neither quill nor qualm, quothed:
    >
    > > Thank for the answer! I really appreciate.
    > > I am using
    > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    > > I can't use a strict DTD otherwise is messes up my menu (switching menu
    > > with pictures).
    > > Moreover, I tried not to set the height to 100%, but since it contains
    > > a background, it won't go to to the bottom of my page...
    > > Plus, if that maintext goes over the length of the page, my gradients
    > > on the side (in another div that starts from the top, and set to
    > > height:100%) stop at a 100%...
    > > I thought I was going to use DIV cause you can't set the table height
    > > to 100%, but I guess that I'll go back to tables!! lol
    > >
    > > Any thoughts?
    > > Thank you,
    > > celine

    >
    > Css isn't perfect, and sometimes tables are the better solution for a
    > particular "problem". Perhaps if you post a url, I and others might get
    > a better read on things.
    >
    > --
    > Neredbojias
    > Contrary to popular belief, it is believable.
    , Dec 8, 2005
    #8
  9. Neredbojias Guest

    With neither quill nor qualm, quothed:

    > thank you for your reply!!
    > Finally, I changed my mind. I'm gonna keep working with divs, but I
    > will forget about making the height 100%. So I'll see what I'll do
    > instead!


    Probably the best idea. 100% height is tricky and imperfectly supported
    across browsers, anyway.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Dec 9, 2005
    #9
    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. Bernd Meier
    Replies:
    6
    Views:
    499
    GTalbot
    Jan 14, 2008
  2. samer
    Replies:
    3
    Views:
    414
    Gregory A. Beamer
    Sep 28, 2009
  3. fred
    Replies:
    3
    Views:
    256
    Zifud
    Mar 17, 2005
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    172
    David Dorward
    Jun 1, 2005
  5. Replies:
    5
    Views:
    861
Loading...

Share This Page