Forum Moderators: not2easy
FRAMESET rows="40,10,*"
how can one define a DIV that mimics the * quality of the above FRAMESET? it is important that the last DIV have overflow: scroll capabilities.
by the way, this need not be a cross-browser solution. the implementation i'm working on is restricted to IE 5.0+.
Have you taken a look at the glish and bluerobot examples? Both have some very nice, cross-browser fluid layouts for use, that I think may suit your needs.
Just put .com on the end's ;)
Nick
HTML for both solutions
<body>
<div id="header1">first header HTML</div>
<div id="header2">second header HTML</div>
<div id="content">content HTML</div>
</body>
Styles for solution A
NOTE: i wanted to use margin-top in this example but for some reason it wouldn't provide a margin. the border, however, worked excellently.
body {
margin: 0px;
overflow: hidden;
}#header1 {
position: absolute;
overflow: hidden;
height: 40px;
top: 0;
left: 0;
width: 100%;
}#header2 {
position: absolute;
overflow: hidden;
height: 35px;
top: 40;
left: 0;
width: 100%;
}#content {
height: 100%;
width: 100%;
border-top: 75px solid #CEDBEB; /* color equal to the background of the page, though it's never seen */
overflow: auto;
}
Styles for solution B
NOTE: notice that the height of the content DIV ends up being the height of the two header DIVs plus 5 pixels. not sure why.
body {
margin: 0px;
overflow: hidden;
}#header1 {
overflow: hidden;
height: 40px;
width: 100%;
}#header2 {
overflow: hidden;
height: 35px;
width: 100%;
}#content {
height: expression(document.body.offsetHeight-80);
width: 100%;
overflow: auto;
}
in any case, solution A seems to be a lot more stable since it doesn't rely on an expression. i have not yet tested either of these on anything but IE 5.5PC. as i noted before, my implementation is restricted to IE 5.0+ PC so i won't be worrying about anything but that. however, if you test it on other browsers, let me know how it stands up.
