Welcome to WebmasterWorld Guest from 54.159.44.227

Forum Moderators: not2easy

Message Too Old, No Replies

how to mimic FRAMESET's "all other" sizing?

want to use CSS to set three frames, one that takes up any left over space

     

seanmcleary

1:25 am on Feb 19, 2003 (gmt 0)

10+ Year Member



i'm trying to create a layout that use three DIVs, two which have static heights, and one which i want to have take up the remaining real estate. for example, in HTML, a FRAMESET can be defined as:

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+.

BlobFisk

10:27 am on Feb 19, 2003 (gmt 0)

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Welcome to WebmasterWorld, seanmcleary! Check out Marcia's excellent WebmasterWorld Welcome and Guide to the Basics [webmasterworld.com].

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.

seanmcleary

4:37 pm on Feb 19, 2003 (gmt 0)

10+ Year Member



BlobFisk: thanks for the reply. where can i find these two examples?

Nick_W

4:41 pm on Feb 19, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hi there! and welcome...

Just put .com on the end's ;)

Nick

seanmcleary

4:56 pm on Feb 19, 2003 (gmt 0)

10+ Year Member



ohh, i get it. we don't speak of <hushed whisper>other websites</hushed whisper>. thanks for the help.

BlobFisk

6:40 pm on Feb 19, 2003 (gmt 0)

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



My apologies seanmcleary - I sometimes forget that people may (like me not so long ago!) never have heard of glish or bluerobot...

seanmcleary

12:39 am on Feb 20, 2003 (gmt 0)

10+ Year Member



after looking at the sites you recommended, and poking around this one a bit, i came up with two solutions to my problem: (A) use an expression to determine height of the flexible area, and (B) use a border equal to the height of the two static DIVs. here they are in example:

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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month