I'm sorry, my "what it should look like" page got screwed up. The blue
div should be fully contained within the outer green container.
I appreciate you response, but you used fixed heights to achieve this,
and the whole point of my question was that I can't use fixed heights.
I suppose this is further evidence that this type of layout can not be
achieved with CSS alone.
Gunlaug Sørtun wrote:
> Seth Green wrote:
>> 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.
> I don't think this is how you want it, but if I am to achieve the visual
> you're after, it will end up something like this...
> ...where the apparent overflow at the bottom of the green-bordered div
> is added by me, just to make it look even more like the example you
> linked to.
> As you have no real control of container-width, amount of text,
> font-size and font-family, I have to add 'overflow control' on two
> fixed-height containers, inside another fixed-height container. The
> result doesn't look good IMO, but it's as close as you can get with CSS
> I think it might be closer to what you want _if_ the overflowing part of
> 'nonScrollDiv' could "spill over" to 'scrollDiv', so only the latter
> were to scroll - regardless of whatever variables that affected your
> construction. You could possibly achieve that with some clever
> The normal way of handling cases like this with CSS, is to put all text
> (and whatever else we got) inside one fixed-height container, and add
> 'overflow: auto' to that container. Then the spill-over is automatically
> taken care of, and you get a scrollbar when you need one.
> Apparently that's not what you want, but here's a basic example anyway...
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/