W3C home > Mailing lists > Public > www-style@w3.org > January 2002

RE: Positioning

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
Message-id: <65685200AF3BE8418427361347397230142F17@POSTOFFICE.uwyo.edu>
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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:12 GMT