Skip to Content
KV5R Web Designs

Fluid Layout Done Right

Left Menu

Home Posts Bread Soaping Photo-Video Computers Web Dev Ham Radio

News

This is td #lft, CSS-controlled at 175px, mouseover button effects, and font-size constraints. This column may contain a menu, dynamic feed, event calendar app, an AdSense skyscraper, and other widgets. The CSS width on lft h1 eliminates the need for an invisible gif.

Fluid Layout Tables

In addition to the CSS defaults established earlier, this page uses the following CSS to control its three stacked layout tables, the 4 cells, and everything within them.

/* Layout Tables (fluid) */
.lay { /* the class used for all 3 tables: */
 border-collapse:collapse; width:100%;
 margin:0; border:0; }

#top { /* our td id='top' header cell */
 height:125px; width:100%; padding:0; border:0;
 vertical-align:middle;
 background:url("some.jpg") repeat-x scroll 0 0; }

#lft { /* our td id='lft' left-column cell */
 border:0; width:175px; _min-width:175px; padding:20px;
 background-color:transparent; font-size:0.9em;}

#lft h1 { margin:20px 0 5px 0; font-size:16px;
 border-bottom:4px dotted #D2CCB7;
 padding-bottom:0.1em; width:175px; }
#lft h2 { margin:10px 0 5px 0; font-size:16px; }
#lft h3 { margin:10px 0 5px 0; font-size:14px; }
#lft h4 { margin:10px 0 5px 0; font-size:12px; }
#lft h5 { margin:10px 0 5px 0; font-size:10px; }
#lft p  { font-size:0.8em; padding-bottom:0.5em; }

#lft a { /* create CSS mouseover-effect buttons */
 display:block; width:100%; text-align:center;
 text-decoration:none; font-weight:bold;
 font-family:"Century Gothic",futura,"URW Gothic L";
 border:1px outset #E2DCC7; background:#F0E8D7;
 margin:0 0 5px 0; padding:1px 2px 2px 2px; }
#lft a:hover {
 border:1px inset #E2DCC7; background:#E2DCC7;
 text-decoration:none; }

#mid { /* our td id='mid' main content cell */
 border:0; width:auto; padding:20px;
 background-color:transparent; font-size:1em;}

#mid h1 {
 margin:0 0 0.25em 0;
 font-family:"Century Gothic",futura,"URW Gothic L";
 font-size:30px;font-weight:normal;letter-spacing:6px;
 border-bottom:4px solid #D2CCB7;padding-bottom:.1em;}

#mid h2 {
 margin-bottom:0.25em;
 font-family:"Century Gothic",futura,"URW Gothic L";
 font-weight:bold; letter-spacing:4px;  }

#mid p, #mid li { font-size:1em; text-align:justify;}

#ftr { /* our td id='ftr' footer cell */
 height:24px; width:100%; margin:0;
 background:url('some.jpg') repeat-x scroll 0 0; }
p.ftr { font-size:8pt; text-align:center; margin:0; }
   

Note that a right column, if used, will be similar to left; also that more column-specific CSS formatting may be created as needed; also that I always use a Windows, Mac, and Linux font, without fall-backs, for font-family.

Now let’s see how the CSS is used in an HTML layout. As with divs, all we have to do is link our elements to our CSS. Unlike divs, we don’t have to float anything, fix any IE bugs, or worry about uneven column heights.

<body>
<!-- top header, 1 cell table -->
<table class="lay">
 <tr>
  <td id="top">
   <img class="hctrt" src="img/some.gif" alt="KV5R">
   <p class="xpnd">Some Expanded Text</p>
  </td>
 </tr>
</table>

<!-- content area, 2 cell table -->
<table class="lay">
 <tr>
  <!-- Left Column (fixed-width) -->
  <td id="lft">
   <h1>CSS Menu</h1>
   <a href="index.asp">Main</a>
   <a href="rules.asp">Rules</a>
   <a href="layout.asp">Layout</a>
  </td>
  <!-- Mid Column (fluid) -->
  <td id="mid">
   <h1>a heading</h1>
   <img class="fr" src="img/some.png" alt="Flowers">
   <p><span class="dcap">A</span> paragraph.</p>
   <p>A paragraph.</p>
   <p>A paragraph.</p>
   <h3>A Sub-heading</h3>
   <p>A paragraph.</p>
   <p>A paragraph.</p>
   <ul>
    <li>a list item</li>
    <li>a list item</li>
   </ul>
   <p>A closing paragraph.</p>
  </td>
 </tr>
</table>

<!-- Footer -->
<table class="lay">
 <tr>
  <td id="ftr"><p class="ftr">Footer Text</p></td>
 </tr>
</table>

</body>

…all done with 3 stacked tables, 4 cells, no wrappers, no nests, no proprietary/deprecated markup, and no div float problems. This page is proof that a table-based layout can be clean and compliant HTML4 Strict, CSS2, and WCAG1. WAVE, Ocawa, Cynthia Says, and Section 508 accessibility validators detected zero accessibility errors in this page.

The secret? Stack, don’t nest! It just works.

Now, please return to the main article.

Copyright © 2008 Harold Melton, KV5R. All rights Reserved.

Valid HTML 4.01 Strict  Made with Note Tab Pro Editor  Valid CSS2