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

RE: Positioning

From: Benjamin D. Gray <BDGray@uwyo.edu>
Date: Tue, 29 Jan 2002 21:00:35 -0700
To: Jonathan Watt <0jaw@qlink.queensu.ca>, www-style@w3.org
Message-id: <65685200AF3BE8418427361347397230142F14@POSTOFFICE.uwyo.edu>
How about this (using css):

<?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">
      #top {
        background: red;
        color: white;
        width: 100%;
      }
      #left {
        background: blue;
        color: white;
        height: 80%;
        float: left;
        white-space: nowrap;
        overflow: auto;
      }
      #mid {
        background: white;
        color: black;
        height: 80%;
        width: 80%;
      }
      #right {
        background: lime;
        color: black;
        height: 80%;
        float: right;
        white-space: nowrap;
        overflow: auto;
      }
      #bottom {
        background: yellow;
        color: black;
        width: 100%;
        clear: both;
      }
    </style>
  </head>
  <body>
    <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="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.
      <br />
      : Left
    </div>
    <div id="right">
      Right:
      <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.
      <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 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 Tuesday, 29 January 2002 23:01:13 GMT

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