Problem with the heights

[yaniv111]

Hello
I got 3 divs – top bottom and middle,
The top have to be always 20px and always on the top
The bottom have to be always 20px and always on the bottom page
The mid will get a scroll if overflow
The page has to kip its 100% not more.

This is my cod – don’t know hot to do it..

    <style>
.top
{
	width: 100%;
	height: 20px;
	background-color: Gray;
}


.mid
{
	width: 100%;
	background-color: Olive;
	position:relative;
	
	overflow: auto;
}
.botom
{
	width: 100%;
	height: 20px;
	background-color: Teal;
	position: absolute;		
}

    </style>   
       
        <div class="top">
            top
        </div>
        <br />
        <div class="mid">
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
        </div>  
    <br />   
        <div class="botom">
            bottum
        </div>

thanks

[Dormilich]

This is why frames were invented in the first place.
To get an element stay where it is you can use position: fixed (not working in IE), plus a padding (or margin) of the underlying element. getting the footer in the right position might be the tricky part, there you should have a look at this thread.

[David Laakso]

See this page by Georg Sotun [1]. Note that IE/6 and down need to be in quirksmode or it will fail in those browsers. Maintain the xml declartion

<?xml version="1.0" encoding="utf-8"?>

above the doctype, as he has done, to put IE/6 and down in quirks-- and you're good to go...
[1] moa_08.html

[yaniv111]

thanks all but i will get it by j.s - easier