First of all, the content in the non scrolling div pretty much takes up all of
the 200 px of height you assigned it, so it seems to overflow out of the green
div regardless. If you change that to 300px then you have the room to put in
even a very slim scrolling div.
I imagine your main problem with the second files css is that you have to
specify a height for the scrolling Div. havent been able to figure that one out
yet.
To stop the scrolling div from overflowing out of the green one on the bottom,
put:
#fixedHeightContainer {
height: 300px;
border: 4px solid green;
position: relative;
}
#nonScrollDiv {
border: 2px dashed red;
}
#scrollDiv {
border: 2px dashed blue;
position: absolute;
bottom: 0px;
height: 100px;
width: 100%;
overflow: scroll;
}
I have only just started experimenting with positioning though, and I dont know
if this is really how it is supposed to be used.
I had hoped that by putting margins on the bottom or top of the divs concerned
they would not bump into one another when the height restriction is removed,
but alas no.
Here is the test page http://normalish.com/test_page.html. This page
links to another page that shows what the page would look like if I were
to accomplish my goals. You should ignore the css on the 2nd page since
it breaks the rules I set below. It is onlt there as a visual
representation of my end goal.
The green div is the container for both the red and blue divs. It has a
known, fixed, height.
The red div is of variable height. ** I do not know what the height of
this div will be **
The blue div also has an unknown amount of content.
What I want to accomplish is that the blue div will not spill over the
container, but instead "fit" in the space remaining after the red div,
and have scrollbars appear.
I think I could accomplish this with javascript, but would /love/ to
find out that this can be done using pure CSS.
I have tried a couple of approaches, but can't get it to do what I want.
Does anyone know if this is possible?
Thanks in advance,
Seth (first timer!)
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
