Web Page Layout Using CSS Rather Than Tables

A recent question on an HTML email group I am a member of was:
"If the future of Web design is accessible pages that uses tables just to hold data and NOT for page formatting, does anyone know of a good CSS tutorial or book that gets beyond basic CSS and instead covers page layout sans tables?"

The following comments/web references/book list were the reply - listed here for reference only, none have been 'tried out' - (I hope I haven't trod on any toes regarding copyright?)

CSS online:
• http://www.thenoodleincident.com/tutorials/box_lesson/index.html
• http://www.w3schools.com/css/

Books:
• Eric Meyer on CSS http://www.ericmeyeroncss.com/order.html
• CSS: The Definitive Guide, 2nd edition (also by Eric Meyer)
• CSS: Separating Style from Content (author Briggs)

• http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
• http://www.glish.com/css/
• http://www.bluerobot.com/web/layouts/

• 1) Box Lessons
  http://www.thenoodleincident.com/tutorials/box_lesson/index.html
  It has a list of pointers to various resources, including the wonderful "Little Boxes" page (see item N 2)
• 2) Little Boxes
  http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
  A complete series of example multicolumn layouts, with the CSS code used to realize them
• 3) glish.com CSS Layout Techniques
  http://www.glish.com/css/
  A few more example layouts with complimentary CSS code, a discussion of CSS hacks (see item N 4), and the new "Celebrity Makeover" section, where famous table-based sites are reworked using CSS (again, with the full CSS code available for you to view)
• 4) glish.com CSS hacks
  http://www.glish.com/css/hacks.asp
  Four pieces of advice for effective CSS design. Includes a quick explanation of the so called Tantek Celik hack (see item N 5)
• 5) A few hacks by Tantek Celik
  http://www.tantek.com/CSS/Examples/boxmodelhack.html
  http://www.tantek.com/CSS/Examples/highpass.html
  http://www.tantek.com/CSS/Examples/inlinehpf.html
  The "box model hack" a.k.a. the Tantek Celik hack, is a way to overcome an annoying bug in the box model of Internet Explorer (all versions up to and including 5.5). The high pass and inline high pass hacks are a way to prevent older browser from seeing advanced stylesheets that they cannot properly render.
• 6) CSS / edge
  http://www.meyerweb.com/eric/css/edge/
  Examples of advanced CSS layout techniques, pushing CSS to the edge (most of the examples fail even in IE 6 for Windows; be sure to look at this site with Mozilla; IE 5.x for the Mac is safe, though)
• 7) BlueRobot's Layout Reservoir
  http://www.bluerobot.com/web/layouts/
  Three more example layouts, and a couple of techniques for cross-browser horizontal centering

These form a good starting point, and of course everyone should peruse the specs! ;-)

From: Marina Pianu
i imagine that you have already visited the www.w3c.org site, where there are all the specifications and tutorials for css, but, i agree, it's not terribily "divulgative".
here are a couple of good sites for css tutorials: http://hotwired.lycos.com/webmonkey/reference/stylesheet_guide/
but, more specifically for tables, i suggest you take a look at:
www.glish.com/css/hacks.asp

From: "Tom Martin"
A very useful book is "Eric Meyer on CSS: Mastering the Lanugage of Web Design;" New Riders, July 2002, copyright 2003.
An earlier title by Eric Meyer, "Cascading Style Sheets: The Definitive Guide;" O'Reilly, 2000, focused on CSS1.
I have read through, and continue to refer to, both titles. Finally, a reference title for quick lookup, if one does not want to click through the W3 recommendation, is also by Eric Meyer, "Cascading Style Sheets 2.0: Programmer's Reference;" Osborne [an imprint of McGraw-Hill], 2001.

I have no relationship with Eric Meyer, familial, financial, or otherwise. I do find that his approach to explaining and his examples are useful.

A good walkthrough on converting to a three-panel, positioned CSS2 layout is on a site maintained by one called Zeldman, A List Apart. Here is the URL:
http://www.alistapart.com/stories/journey/3.html

Searching the archive of ALA may also turn up some additional help. For instance, I used the string "table layout" to find the "Journey" article; two other articles popped up, as well.

Another Internet resource is Westciv, . The site provides tutorials on CSS, some free, some not. There are a couple of editors available, also; one purely for creating stylesheets, another purely for creating layout using CSS.

Finally, a site for which I am responsible is presented using XHTML and CSS, but does not use positioned divs or html to present documents, www.loc.gov/nls. The site is fully compliant with standards (a) through (p) of 36 CFR 1194.22, the standards promulgated under authority of the Rehabilitation Act Amendments of 1998. The Rehabilitation Act Amendments of 1998 amended Section 508 of the original 1973 Rehabilitation Act. Hence, the street name of Section 508. The codified law is at 29 U.S.C. 794 (d).

From: Peach Lynda L Contr 96 CG/SCTOA

Highly recommend Eric Meyer's book, "Eric Meyer on CSS" which covers exactly what you are wanting. This book is a tutorial and one of the few where I literally worked the book from beginning to end leaving out only one chapter. It's timely, well-written. Check his web site for errata that always creeps in. This book was published this summer. Cost: is $31.95 from Amazon [new].

I heard Eric at the Web Design World conference in Seattle in July and his presentation was one of the best ones there. He really opened our eyes to the possibilities of CSS2.

Something to keep in mind -- you don't have to go 100% CSS2 to make it useful. You can utilize elements from CSS2 in current web pages to make them less bloated without having to totally convert a site.

From: "Larry G. Hull"

Patrick,
You may want to take a look at
http://www.oreillynet.com/pub/a/javascript/synd/2002/03/01/css_layout.html
I find the print version easier to read.

From: Harold Goldstein

on my resource page at
http://www.goldray.com/css/style_resources.htm
i list several --

• http://www.oreillynet.com/pub/a/javascript/synd/2002/03/01/css_layout.html?page=1 - intro to css layout
• http://glish.com/css/ - more on css layout
• http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html - various layout schemes
• http://www.bluerobot.com/web/layouts/ - a layout reservoir
• http://www.alistapart.com/stories/practicalcss/

all of these will give you great ideas.