21 Note

“However, since it is preferable to have the page’s content come before the sidebar in text browsers, screen readers…”

I disagree. There are two schools of thought here. One says it is better with the side bar (assuming it is a menu) first. The reason is obvious: screen readers otherwise have to read through the entire content of the main column before offering any menu links to the user. However, if the links come first, you need to add a “Skip menu” link to the main content so people don’t get sick of hearing each link read out on every page. (Something the W3C recommend.)

posted at 05:16 am on June 16, 2004 by Chris Hester

22 CSS nothing but hacks

Yet another contorted CSS alternative to something which is simple with tables. Try teaching this to new students along with the table method and ask them which they think is more intuitive.

CSS layout is a dead duck. CSS if fine for presentation but let’s face it, the whole CSS-P layout thing was an afterthought and it’s lack of coherent design is obvious.

If using CSS-P layout hacks such as these are somehow part of web standards then web standards don’t have a chance of reaching the masses.

This will not be the last CSS layout hack, of that I’m sure.

posted at 05:47 am on June 16, 2004 by gunzip

23 Re: browser support?

Original example nr. 5:
http://www.browsercam.com/public.aspx?proj_id=73252

Example nr 5 where the navigation bar is taller/longer than the main area:
http://www.browsercam.com/public.aspx?proj_id=73249

Example nr 5 where the side bar is taller/longer than the main area:
http://www.browsercam.com/public.aspx?proj_id=73260

(background color has been added to “main” and “outer_wrap” div on the last two examples)

The above doesn’t say anything about what happens when resizing or scrolling, of course.

posted at 05:50 am on June 16, 2004 by Johan Sand

24 re: CSS is nothing but hacks

Gunzip:

Technically speaking, the layout method described in this article is not a CSS hack. When you exploit bugs or deficiencies in a semi-CSS-compliant browser to trick that browser into displaying your layout correctly, that is a CSS hack.

For instance, a common CSS hack consists of writing false width values to compensate for IE5/Win’s incorrect support of the CSS box model — and then using a sophisticated CSS selector to reveal the true width value to better browsers. THAT is a CSS hack.

Understanding how CSS actually works and employing CSS as it was intended is not hacking, it is merely using CSS.

That CSS is sometimes counter-intuitive (which is your larger point) is true. That’s why we run articles like this one; it’s why people like Eric Meyer write books.

Table layout seems intuitive now, but if you can think back to when you first learned it, and if you are honest, you may agree that rowspan and colspan and spacer GIF images and so on were also counter-intuitive until you got the hang of them.

To your larger point that CSS is too difficult to catch on, I would say that the existence of numerous commercial and organizational sites designed with CSS suggests otherwise. Learning CSS layout may be difficult in some ways, but it’s what the industry is doing. An ever-growing number of designers is either using CSS and XHTML, or using Flash, to design increasingly visually sophisticated sites.

It is true that CSS is particularly unfriendly to liquid layouts. I said the same after publishing the first CSS version of A List Apart in February 2001, and I said it again in my book, Designing With Web Standards.

But few clients want liquid layouts.

My agency is known for standards-based design; as a result, we receive many RFPs written by technically-minded people (IT department heads, old-school “webmasters,” and so on). Of all the RFPs we’ve received in the past 24 months, only one mentioned liquid layout in its requirements — and we ended up not working on that job anyway, so I don’t know if the client would have stuck to his guns about that requirement or not.

Most clients want layouts that look as tight and good as print. And that almost always means they want fixed-width layouts (typically 770px wide) that are centered or aligned left. And CSS makes it very easy to create such layouts, using float or absolute positioning or a combination of the two. The tricky part is compensating for older, less compliant browsers, but the workarounds are well known. CSS layout is catching on because it provides real benefits, and because those methods that work best in CSS coincide with what most clients want.

posted at 07:21 am on June 16, 2004 by apartness

25 tables are used as hacks more often than css

Gunzip,

Following up on apartness, you should realize that using tables for layout is more of a “hack” than this technique.

Using tables for layout is using them to solve a problem outside the scope of their original purpose (displaying tabular data), thus, a hack.

Times are changing sir, change with them.

posted at 08:26 am on June 16, 2004 by david

26 "The Tonico Method"...

Is what I’ve been calling this technique since I first saw the implementation over at http://www.webproducer.at/flexible-layout/. Worth checking out.

posted at 01:02 pm on June 16, 2004 by Gee

27 Aw beans, I just reposted

Kind of…I see now that Tonico is already represented on this thread. Sorry about that. Still a good implementation, though.

posted at 01:09 pm on June 16, 2004 by Gee

28 Is it possible to remove the class="last"

It’s a nice technique, the only thing that bothered me is the class=“last” in the last paragraph to remove the bottom margin. If you have your content in some kind of database and extract it to display, this class creates the need to modify the content to do it. Is there any trick to bypass it?

posted at 02:36 pm on June 16, 2004 by Paulo Eduardo Neves

29 problem with IE

Thought I’d give this a shot for a new table-less redesign, but am having trouble with IE’s tiling of the right column background image:

http://www.auroratheatre.org/v4/

If the right column is longer than either of the other two, then the background color of the outer_wrapper shows between the tiling for the wrapper and the container.

Have I done something wrong? Anybody else having this problem?
-D

posted at 03:36 pm on June 16, 2004 by Daniel

30 problem solved, I guess

Daniel, you should set a background color to the #sidebar

And I found a typo going through your stylesheet: #header { border_bottom: 1px solid #CF5813; background: #000;

no need to explain, is there?

posted at 12:27 am on June 17, 2004 by Tim