I would like to change my table-based layout to a CSS one, 
but I'm not quite sure how to do it.  I've done simple 
CSS-based layouts but this one has me stumped.

It is a variation on a simple fluid two-column layout with 
the main content on the left and the navigation on the 
right.  The catch is that I want a copy of my navigation 
line repeated at the bottom-right of the page.  This should 
be inside a box bounding almost all the contents of the 
page.  Neither the main content nor the navigation column is 
of fixed size, and either one could be longer than the 
other.

A sample of this style is below, layed out with tables.  
Does anyone have a suggestion as to how to alter it with 
CSS?

Thanks,

  -- Scott

Scott Sauyet
  scott_sauyet(at)output.net
    (860) 290-7453
"Join the Frisbeetarians.  When you die, your soul goes on the roof." 

============================================================
<.html>
  <.head>
    <.title>Laid out with tables rather than CSS</.title>
    <.style>
      .bottom {
          border-bottom: 1px solid #aaa;
          border-left: 1px solid #aaa;
          padding: 10px;
          width: 70%;
      }
      .content {
          background-color: #fff;
          border-top: 1px solid #aaa;
          border-left: 1px solid #aaa;
          padding: 10px;
          width: 70%;
      }
      .navbar {
          background-color: #ffc;
          border-top: 1px solid #aaa;
          border-right: 1px solid #aaa;
          padding: 10px;
      }
      .navbottom {
          background-color: #ffc;
          border-right: 1px solid #aaa;
          border-bottom: 1px solid #aaa;
          padding: 10px;
      }
    </.style>
  </.head>
  <.body class="bg" bgcolor="#ffffff" text="#232f4e">
    <.p>Some general headers go here.<./p>
    <.table cellspacing = "0" 
           cellpadding = "0" 
           width = "95%" 
           align = "center">
      <.tr>
        <.td class="content">
          <.p>The main content goes here.  It can grow 
             indefinitely and be larger or smaller than the
             navigation bar to the right.</.p>
        </.td>
        <.td class="navbar">
          <.p>Navigation, copyright and other information
             go here.  This may include a JavaScript 
             tree-menu widget or be customized by user 
             and/or page.  It does not have a constant 
             height, and could definitely be taller than 
             the main content area (although it is likely
             to be smaller.)</.p>
        </.td>
      </.tr>
      <.tr>
        <.td class = "bottom">&nbsp;</.td>
        <.td class = "navbottom">
          <.p>Another copy of the navigation goes here.  
             This should sit on the bottom of the page, 
             next to the scrollbar.</.p>
        </.td>
      </.tr>
    </.table>
  </.body>
</.html>
============================================================

• Web Designer Courses
• Off the Shelf Training Courses

HWG hwg-style mailing list archives, maintained by Webmasters @ IWA