1 ???

Good article, but one nitpick: id=“top-section”, isn’t that a style hint embedded into the HTML code? I thought we were trying to get away from that sort of thing.

posted at 09:17 am on November 16, 2002 by greg

2 Well...

This article would have greatly benefitted from a picture showing what the final product is supposed to look like.

I don’t like the Javascript hack at all. Javascript shouldn’t be used for anything more than enhancements; requiring it to make a page display properly is a big mistake. Too many users surf with Javascript turned off for us to rely on it so heavily. Designers must make sure that their design will display reasonably without the execution of any Javascript code.

The first example, however, looks very nice, provided it works in practice ;)

posted at 10:52 am on November 16, 2002 by Slime

3 CSS id names

Greg you’re right. I think getting a designer to use CSS over tables and font tags is on major hurdle. Using id=“top-section” is like a trainning wheel, the designer can visualize what/where top-section will be. Once they get more accustom to CSS they can start using nonstyle hinted tags. Then again, what makes a good id/class name? Should random characters be used i.e id=“abcxyz” ?

posted at 10:53 am on November 16, 2002 by adamd

4 id="abcxyz"

I think a good ID/class name should tell what the object contains. i.e.: <div id=“about”>This site is about…</div>

posted at 11:29 am on November 16, 2002 by Ging11011

5 re: Well ...

The article ends with a link to a working example:

http://www.donkeyontheedge.com/ala.html

Better than a picture.

Slime http://www.alistapart.com/stories/flexiblelayouts/discuss/#ala-1301 wrote:

>This article would have greatly benefitted from a picture showing what the final product is supposed to look like.

posted at 11:46 am on November 16, 2002 by dzinelad

6 re: Well ...

The article ends with a link to a working example:

http://www.donkeyontheedge.com/ala.html

Better than a picture.

Slime http://www.alistapart.com/stories/flexiblelayouts/discuss/#ala-1301 wrote:

>This article would have greatly benefitted from a picture showing what the final product is supposed to look like.

posted at 11:47 am on November 16, 2002 by dzinelad

7 Unmentioned problem

The pure CSS (ie the best one ;) ) suffers from a slight problem in that the position of the footer is reliant on the size of the middle 2nd column alone (since the other’s are absolute).

This means that if this is not the largest column then the footer will be placed too high in the document, and be over the other ‘absolute’ columns.

Not sure how to fix that. You could beef it up with br’s, which is an ugly solution. Or I suppose you could ‘floating’ the columns and ‘clearing’ the footer – but that negates the whole article. :-)

posted at 01:33 pm on November 16, 2002 by Chris

8 re: CSS id names

I agree that id (or class) attribute names ought to reflect their content. More specifically they should add structural hints HTML isn’t capable of, like id=“nav_menu”.

posted at 02:01 pm on November 16, 2002 by greg

9 more on id names/javascript

if you visit http://www.donkeyontheedge.com/ala.html
and view source, you can see some good example of id names. and if you visiy with javascript turned off you will be treated to a view with no grid.

posted at 02:37 pm on November 16, 2002 by foobar

10 Why not float?

I would have thought there are better ways to achieve the same affect without absolute or relative positioning and certainly without unreliable javascript hacks. As people have already mentioned here, around 12% of users have JS disabled, so why would anyone want to create a site that depended upon JS to display it properly!

IMHO, a much better way would be the following:

#top { margin:10px; } #colone { float:left; display:inline; margin-left:5px; width:30%; } #coltwo { float:left; display:inline; margin-left:5px; width:30%; } #colthree { float:left; display:inline; margin-left:5px; width:30%; } #footer { margin-top:30px; padding:10px; clear:both; }

That gives a header and footer that can be any height, and of course 3 columns, the footer is not dependant on any one column for its proper display. I only tested it on a PC including Opera6 and Moz/NN6/7 and I assume it should be fine on a MAC too (I hope!).

The only issue is that the third column will collaspe when you move your browser in to around 400px wide, but I don’t see that as a major problem.

posted at 04:59 pm on November 16, 2002 by Peter Hawkes

Discussion Closed

New comments are not being accepted, but you are welcome to explore what people said before we closed the door.

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)