Fluid Layout Done Right |
Left MenuHome Posts Bread Soaping Photo-Video Computers Web Dev Ham RadioNewsThis 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 TablesIn 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. |
Copyright © 2008 Harold Melton, KV5R. All rights Reserved. |