homepage Welcome to WebmasterWorld Guest from 54.198.148.191
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
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




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

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




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

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




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

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

Nick_W




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

Hi there! and welcome...

Just put .com on the end's ;)

Nick

seanmcleary




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

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

BlobFisk




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

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

seanmcleary




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved