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

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

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

Check out this thread:
http://forums.devshed.com/t79999/s.html

HTH

Jamie

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!

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.

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.

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

See if this site gives you any ideas.

cheers,

gary