Re: Fluid two-column layout in CSS?

Hi Scott,

I believe what you want can be easily done using CSS for positioning.  The 
concept is easy to master; its behavior in different browsers requires a 
little more patience.  ;)

You'll find great tips, including code, here:  http://glish.com/css/

Good luck.
-kb



At 01:53 PM 1/7/2002 -0600, you wrote:
>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>
>============================================================

_________________________________________
Kevin W. Bishop
Communication & Collaboration Technologies
Rensselaer Polytechnic Institute
<bishopk(at)rpi.edu> | <http://www.rpi.edu/rpinfo/>

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