- From: Benjamin D. Gray <BDGray@uwyo.edu>
- Date: Wed, 30 Jan 2002 10:22:26 -0700
- To: Jonathan Watt <0jaw@qlink.queensu.ca>, www-style@w3.org
How about this?
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>5 Div Layout</title>
<style type="text/css">
body, div {
margin: 0px;
padding: 0px;
overflow: auto;
}
#main {
height: 300px;
width: 100%;
}
#top {
background: red;
color: white;
width: 100%;
}
#left {
background: blue;
color: white;
float: left;
white-space: nowrap;
height: 100%;
}
#mid {
background: white;
color: black;
height: 100%;
}
#right {
background: lime;
color: black;
float: right;
white-space: nowrap;
height: 100%;
}
#bottom {
background: yellow;
color: black;
width: 100%;
clear: both;
}
</style>
< s c r I p t type="text/javascript" >
function adjustMidSectionHeight()
{
var divMain = document.getElementById('main');
var divTop = document.getElementById('top');
var divBottom = document.getElementById('bottom');
var intTop = divTop.scrollHeight;
var intBottom = divBottom.scrollHeight;
var intHeight = (document.body.clientHeight - (intTop +
intBottom));
// change the 50 to whatever height you want to stop at.
divMain.style.height = (intHeight < 50)? 'auto': intHeight;
}
function adjust()
{
adjustMidSectionHeight();
}
window.onresize = adjust;
< / s c r I p t >
</head>
<body onload="adjust();">
<div id="top">
Top: Various content. Various content. Various content. Various
content. Various content. Various content. Various content. Various
content. Various content. Various content. : Top
</div>
<div id="main">
<div id="left">
Left:
<br />
Various content.
<br />
Various content.
<br />
Various content.
<br />
Various content.
<br />
Various content.
<br />
Various content.
<br />
Various content.
<br />
Various content.
<br />
Various content.
<br />
Various content. : Left
</div>
<div id="right">
Right: Various content.
<br />
Various content.
<br />
Various content.
<br />
Various content.
<br />
Various content.
<br />
Various content.
<br />
Various content.
<br />
Various content.
<br />
: Right
</div>
<div id="mid">
MID: Various content. Various content. Various content.
Various content. Various content. Various content. Various content.
Various content. Various content. Various content. : MID
</div>
</div>
<div id="bottom">
Bottom: Various content. Various content. Various content.
Various content. Various content. Various content. Various content.
Various content. Various content. Various content. : Bottom
</div>
</body>
</html>
Received on Wednesday, 30 January 2002 12:23:58 UTC