Layout: Bottom Box below overflow-scroll?

[bvdb]

Hello,
I designed a frame-based site layout: one right column frame, a fixed top and bottom frame and a scrolling center (see http://kanka.de/konzept ).

Now I tried to convert this to CSS2, top and right boxes work fine, scrolling box as well ('position.. overflow').

:mad: BUT: The bottom-box gets overlayed by text from the scroll-box when the window is small ( see http://www.kanka.de/test/overflow_test.html ).

Is it possible at all to program this kind of layout with CSS?

// Bernd

[BonRouge]

this? (http://cheers-sendai.com/kanka.htm)

[bvdb]

Great - this works. :)
I was looking at several CSS-sites but none had a similar layout example or adressed the problem.
Only I do not (yet) understand the magic - is it the '* html #text ' definition .. or 'overflow: hidden'?
Will have to dig a bit deeper .. anyway - thanks!

[LJK]

Hi -
I noticed that you used floats but didn't see any
block-level elements afterwards that used clear:both;
in order to float them correctly...

Also, I usually set a height for any elements that I'm
going to scroll, which also helps to solve placement
issues - without a lot of extra coding or 'hacks'.

Good luck,
El

[BonRouge]

I don't understand it 100% myself - I just know it works.

We need this : overflow : hidden; to keep everything on the page - without it there are extra scrollbars that we really don't want.

This part : * html #text {
top:0px;
bottom:0px;
height : 100%;
max-height : 100%;
position : absolute;
border-top : 55px solid #ddd;
border-bottom : 40px solid #ddd;
z-index:1;
}{
is for IE - it works fine in Firefox without it.

Not a great answer - I know, but...

Maybe someone else can explain to us why this works...(?)