#1
  1. Senior Polecat
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Location
    Jersey (the original version)
    Posts
    210
    Rep Power
    11

    CSS Divs stretching to 100% height


    or not!

    Could people have a look at my site and let me know how I can get the div on the right (#rightpane) to run the full height of the page NOT just the browser window.

    The CSS file can be found here.

    TIA

    Icy
    Quidquid latine dictum sit, altum viditur.

    http://www.XSet.co.uk
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2002
    Location
    Quazar
    Posts
    207
    Rep Power
    12
    I had the same problem when putting pixel for the width and % as the height. I don't think you can mix and match.
    I would put the contents for the DIV in a table and set the table to height to 100% and the rightpane div width to 250px
    Last edited by metro; August 29th, 2003 at 11:16 AM.
  4. #3
  5. Senior Polecat
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Location
    Jersey (the original version)
    Posts
    210
    Rep Power
    11
    hi metro,

    thanks for the answer. Unfortunately, I am trying not to use tables for layout on this site in an attempt to retain standards compliance. I'll have a look at using all percentages though - sounds promising.

    thanks again

    Icy
    Quidquid latine dictum sit, altum viditur.

    http://www.XSet.co.uk
  6. #4
  7. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,143
    Rep Power
    2493
    Check out this thread:
    http://forums.devshed.com/t79999/s.html

    HTH

    Jamie
  8. #5
  9. Senior Polecat
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Location
    Jersey (the original version)
    Posts
    210
    Rep Power
    11
    i'm not sure that works.

    I have no problem with the Div being the height of the viewport in either IE or Moz.

    My problem occurs when the page is long enough to allow scrolling... then the div is only as high as the viewport was but doesn't stretch to fill the remaining space.

    Implementing the code from the other thread doesn't fix this.

    Oddly enough I had previously had exactly the same problem as detialled in the other thread but found that adding an XML declaration to the page fixed it in Moz - weird!
    Quidquid latine dictum sit, altum viditur.

    http://www.XSet.co.uk
  10. #6
  11. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    6
    Rep Power
    0
    You could make your body background-color: #6699cc; and add border-right: 2px #000 solid; to your content id to get the look you want.
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    1
    Rep Power
    0
    I believe I have experienced a similar problem. Try placing all of your layout div's (rightpane, content, mainClm, etc.) inside an extra div, maybe call it maincontainer, for which you set the height through css to be 100%. Keep your rightpane div as 100% height. See if that helps. I don't remember but you may also need to experiment with different combinations of the position attribute by setting the maincontainer to "absolute" and the rightpane to "relative" or vice versa.

    Something about the nesting seems to help. Perhaps when a browser calculates the height for your rightpane div, it is setting it to be 100% of the browser window, rather than 100% of your content. You can verify this by resizing your browser window to be smaller (vertically) and then scrolling. You will see that your rightpane div will even shorter than before.
  14. #8
  15. Senior Polecat
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Location
    Jersey (the original version)
    Posts
    210
    Rep Power
    11
    i'm afraid I must admit defeat. I've added a bg image to the body style so it "looks" like the div streches to 100% but it doesn't. Not pretty but better than nothing.

    Thanks for all the help though - i'm only just getting started in CSS for positioning so any help or references are truly useful.

    Cheers guys

    Icy
    Quidquid latine dictum sit, altum viditur.

    http://www.XSet.co.uk
  16. #9
  17. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    See if this site gives you any ideas.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo