Update to my old 3 column layout template

[Toby A Inkster]

About three years ago I put together a minimal pure-CSS layout using as
few hacks as possible that worked well in modern standards-compliant
browsers, but also in Internet Explorer 5+ and Netscape 4.x, while
degrading gracefully in non-CSS browsers.

This can be found here:
http://examples.tobyinkster.co.uk/3col

Today I've updated it a little:

* Got it working in Internet Explorer 7.0 (Only verified
in WINE -- not on Windows. Can anyone verify this on Windows
XP/2003/Vista?)

* Got it working in Internet Explorer 5.2 for Mac (the
last version made).

* Got it working in iCab 3+ for Mac.

* Added a small piece of Javascript to force all the columns
to be same height.

* Added a footer below the columns. When Javascript is
enabled, this will be full-width. Otherwise it will only
be as wide as the middle column.

All this new stuff is here:
http://examples.tobyinkster.co.uk/3col-new

What do people think? A good way of doing 3 columns + header + footer?

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.17.14-mm-desktop-9mdvsmp, up 4 days, 1:46.]

Sharing Music with Apple iTunes
http://tobyinkster.co.uk/blog/2007/11/28/itunes-sharing/

 

[J.O. Aho]

* Added a small piece of Javascript to force all the columns
to be same height.

In SeaMonkey 1.1.7 the middle column is slightly longer than the two at the
side, the middle one touches the footer and it looks like a two pixel high
line between those. The left and right column has 2-3 pixel space between them
and the footer.

 

[Els]

Today I've updated it a little:

* Got it working in Internet Explorer 7.0 (Only verified
in WINE -- not on Windows. Can anyone verify this on Windows
XP/2003/Vista?)

http://examples.tobyinkster.co.uk/3col-new

What do people think? A good way of doing 3 columns + header + footer?

Freezes my IE7 (Windows XP Home).
That is, first loads as it should, showing the same effect as J.O. Aho
is seeing in SeaMonkey, and which my Firefox shows too.
But then as I want to drag the right side of my browser window to see
the effect on a narrower window, my mouse pointer changes into a
west/east arrow, until the page is redrawn, but after that it's all
frozen, and the only way out is ctrl + alt + del.

 

[J.O. Aho]

Freezes my IE7 (Windows XP Home).
That is, first loads as it should, showing the same effect as J.O. Aho
is seeing in SeaMonkey, and which my Firefox shows too.
But then as I want to drag the right side of my browser window to see
the effect on a narrower window, my mouse pointer changes into a
west/east arrow, until the page is redrawn, but after that it's all
frozen, and the only way out is ctrl + alt + del.

Reading your post, I decided to narrow down the window and see what happens.
The text in the mid column will continue downwards outside the middle column
and cover the text in the footer. Still with SeaMonkey, not bothered to try it
in Opera nor Konqueror.

 

[Els]

Reading your post, I decided to narrow down the window and see what happens.
The text in the mid column will continue downwards outside the middle column
and cover the text in the footer. Still with SeaMonkey, not bothered to try it
in Opera nor Konqueror.

That's the same here, but I'm guessing it's because JavaScript is used
to detect the height. A refresh of the page after narrowing the window
will sort it. (Firefox)

 

[Jonathan N. Little]

Freezes my IE7 (Windows XP Home).
That is, first loads as it should, showing the same effect as J.O. Aho
is seeing in SeaMonkey, and which my Firefox shows too.
But then as I want to drag the right side of my browser window to see
the effect on a narrower window, my mouse pointer changes into a
west/east arrow, until the page is redrawn, but after that it's all
frozen, and the only way out is ctrl + alt + del.

No such problem with WinXPPro & IE7. Looks okay. But you are correct to
ask Toby. IE7 has it own set of "features" independent of earlier
versions of IE, MS's statements of "embracing web standards" has just
been marketing BS.

 

[Toby A Inkster]

In SeaMonkey 1.1.7 the middle column is slightly longer than the two at
the side, the middle one touches the footer and it looks like a two
pixel high line between those. The left and right column has 2-3 pixel
space between them and the footer.

Yeah -- this is due to having used different amounts of padding on each
column. Technically the heights (in proper CSS box model terms) are
identical. A lot of the presentational stuff (margins, paddings, borders,
etc) was quite scrappy -- it's really just to demonstrate the technique
rather than win any beauty contests.

However, I've just spent 5 minutes cleaning up the paddings, borders and
margins to make them a bit more consistent.

I'd like to offer a prize to anyone who can tell me what's making my JS
fail in Konqueror 3.x but run OK in Safari.

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.17.14-mm-desktop-9mdvsmp, up 4 days, 4:49.]

Sharing Music with Apple iTunes
http://tobyinkster.co.uk/blog/2007/11/28/itunes-sharing/

 

[Toby A Inkster]

Freezes my IE7 (Windows XP Home).

Bonus! ;-)

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.17.14-mm-desktop-9mdvsmp, up 4 days, 5:02.]

Sharing Music with Apple iTunes
http://tobyinkster.co.uk/blog/2007/11/28/itunes-sharing/

 

[richard]

About three years ago I put together a minimal pure-CSS layout using as
few hacks as possible that worked well in modern standards-compliant
browsers, but also in Internet Explorer 5+ and Netscape 4.x, while
degrading gracefully in non-CSS browsers.

This can be found here:
http://examples.tobyinkster.co.uk/3col

Today I've updated it a little:

* Got it working in Internet Explorer 7.0 (Only verified
in WINE -- not on Windows. Can anyone verify this on Windows
XP/2003/Vista?)

Using FF 2 on vista premium looks good. If you intended for the center
div to be bordered, it was not shown.

* Got it working in Internet Explorer 5.2 for Mac (the
last version made).

* Got it working in iCab 3+ for Mac.

* Added a small piece of Javascript to force all the columns
to be same height.

* Added a footer below the columns. When Javascript is
enabled, this will be full-width. Otherwise it will only
be as wide as the middle column.

All this new stuff is here:
http://examples.tobyinkster.co.uk/3col-new

What do people think? A good way of doing 3 columns + header + footer?

Looks good with my stuff.
With JS on the footer is wide as intended.

 

[dorayme]

About three years ago I put together a minimal pure-CSS layout using as
few hacks as possible that worked well in modern standards-compliant
browsers, but also in Internet Explorer 5+ and Netscape 4.x, while
degrading gracefully in non-CSS browsers.

This can be found here:
http://examples.tobyinkster.co.uk/3col

Today I've updated it a little:
....

* Got it working in iCab 3+ for Mac.
.....

All this new stuff is here:
http://examples.tobyinkster.co.uk/3col-new

In iCab 3.03 after the last of the words in the centre column
("...the heights if the browser window is resized."), there is an
enormous amount of space left to scroll down. To give you an idea
visually I might have to make you a movie of it! Or perhaps this
will do: on a 1200px high screen, by the time the last words
mentioned above have disappeared by scrolling down, the scroll
bar (at the roughly average text size for earthling eyes) has
travelled about 1/3 the height. The other 2/3 get nothing but the
empty coloured 3 cols until the footer appears.

On a more cheery note, the little face in iCab beams... I could
have sworn its smile is wider than usual!

What do people think? A good way of doing 3 columns + header + footer?

One of the things I personally would like to see (but it is
perhaps impossible?) in these designs is for the text in the
centre to get bigger on my command but not the sides so much (the
acceleration of the text size on clicks should not be so uniform
acoss columns). As the day wears on, I want to read big but the
navigation is not so big a concern - it would be nice if it did
not come along for the ride quite so much and as a result
encroach on the width of the centre col. I am, of course, not
complaining about your design. This is quite a general thing to
do with most of these em widthed side cols. Not em widthing them
has other downsides!

 

[Baho Utot]

Bonus! ;-)

Would that be perfect?

 

[Disco Octopus]

About three years ago I put together a minimal pure-CSS layout using as
few hacks as possible that worked well in modern standards-compliant
browsers, but also in Internet Explorer 5+ and Netscape 4.x, while
degrading gracefully in non-CSS browsers.

This can be found here:http://examples.tobyinkster.co.uk/3col

Today I've updated it a little:

* Got it working in Internet Explorer 7.0 (Only verified
in WINE -- not on Windows. Can anyone verify this on Windows
XP/2003/Vista?)

* Got it working in Internet Explorer 5.2 for Mac (the
last version made).

* Got it working in iCab 3+ for Mac.

* Added a small piece of Javascript to force all the columns
to be same height.

* Added a footer below the columns. When Javascript is
enabled, this will be full-width. Otherwise it will only
be as wide as the middle column.

All this new stuff is here:http://examples.tobyinkster.co.uk/3col-new

What do people think? A good way of doing 3 columns + header + footer?

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.17.14-mm-desktop-9mdvsmp, up 4 days, 1:46.]

Sharing Music with Apple iTunes
http://tobyinkster.co.uk/blog/2007/11/28/itunes-sharing/

Wow. It really did crash my IE 6.0.2900 on XP

And this is how it looks on my FF 2.0.0.11 when I shrink my browser
window.

http://discooctopus.com/t/ti-3cn.jpg

 

[Toby A Inkster]

In iCab 3.03 after the last of the words in the centre column ("...the
heights if the browser window is resized."), there is an enormous amount
of space left to scroll down.

Really? I only have 3.0.5 and 4.0 for testing. (And 4.0 is plain old
boring, as it just uses WebKit as a rendering engine.)

One of the things I personally would like to see (but it is
perhaps impossible?) in these designs is for the text in the
centre to get bigger on my command but not the sides so much (the
acceleration of the text size on clicks should not be so uniform
acoss columns).

This can be done using scripting (client- or server-side) as long as
you're prepared to use buttons on the site for scaling fonts instead of
using your browser's facility to do so.

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.17.14-mm-desktop-9mdvsmp, up 5 days, 1:49.]

Sharing Music with Apple iTunes
http://tobyinkster.co.uk/blog/2007/11/28/itunes-sharing/

 

[Toby A Inkster]

Freezes my IE7 (Windows XP Home).

I still think that's cool, but I've made efforts to fix it anyway.

It seems to me that it may be caused by repeatedly reassigning the
document.body.onresize event handler, which is a bit of a dumb thing for
my script to have done anyway, so I've made a slight adjustment to it.

How is it now?
http://examples.tobyinkster.co.uk/3col-new

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.17.14-mm-desktop-9mdvsmp, up 5 days, 2:09.]

Sharing Music with Apple iTunes
http://tobyinkster.co.uk/blog/2007/11/28/itunes-sharing/

 

[Neredbojias]

Well bust mah britches and call me cheeky, on Fri, 04 Jan 2008 14:59:20 GMT
Toby A Inkster scribed:

I still think that's cool, but I've made efforts to fix it anyway.

It seems to me that it may be caused by repeatedly reassigning the
document.body.onresize event handler, which is a bit of a dumb thing for
my script to have done anyway, so I've made a slight adjustment to it.

How is it now?
http://examples.tobyinkster.co.uk/3col-new

Same as Els - ie7 win xp sp2 home - and it (still) freezes.

 

[Jonathan N. Little]

Well bust mah britches and call me cheeky, on Fri, 04 Jan 2008 14:59:20 GMT
Toby A Inkster scribed:


Same as Els - ie7 win xp sp2 home - and it (still) freezes.

Okay now this one pegs Windows XP Pro 100% CPU with IE7. Your first one
did not...

 

[dorayme]

Really? I only have 3.0.5 and 4.0 for testing. (And 4.0 is plain old
boring, as it just uses WebKit as a rendering engine.)

I have not updated my iCab for quite some time. (It is 3.0.3 in
fact). I will get 3.0.5. at least. It sounds like they fixed
something. (I better get 4 anyway)

I have just downloaded 3.0.5 but checked your site in 3.0.3
before chucking this version and the fault is now not showing up.
It *was* yesterday and repeatedly. Perhaps you have done
something?

This can be done using scripting (client- or server-side) as long as
you're prepared to use buttons on the site for scaling fonts instead of
using your browser's facility to do so.

O well, that is not so attractive then...

 

[Travis Newbury]

About three years ago I put together a minimal pure-CSS layout using as
few hacks as possible that worked well in modern standards-compliant
browsers, but also in Internet Explorer 5+ and Netscape 4.x, while
degrading gracefully in non-CSS browsers...

The latest Dreamweaver now has several CSS/Div based templates. There
are single and multiple (up to 3 columns I believe) column templates
using CSS and divs. They come in Fixed width, flexible width, and
mixed (some columns fixed some flexible) flavors.

It also gives you the choice of CSS or HTML based atributes (like
center, bold, font, etc...) EVEN when you use the wysiwyg ide.

Is it perfect? Hardly, but I think it shows Adobe is listening.

 

[Els]

I still think that's cool, but I've made efforts to fix it anyway.

Even better, although freezing by definition is the coolest thing of
course...

It seems to me that it may be caused by repeatedly reassigning the
document.body.onresize event handler, which is a bit of a dumb thing for
my script to have done anyway, so I've made a slight adjustment to it.

Funny how you make it sound like your script is doing dumb things on
its own ;-)

How is it now?
http://examples.tobyinkster.co.uk/3col-new

Same thing, but now it's better in Firefox: it redraws the height of
the middle column right after narrowing the window.

 

[dorayme]

Even better, although freezing by definition is the coolest thing of
course...


Funny how you make it sound like your script is doing dumb things on
its own ;-)

By now, TI probably sees his scripts as having a life of their
own.

But seriously, I have sometimes wondered how God thinks humans do
dumb and bad things all on their own. Perhaps He realised
guiltily the true situation when He sent His Son to try to
alleviate the mess?

Same thing, but now it's better in Firefox: it redraws the height of
the middle column right after narrowing the window.

.... and maybe also fixed what I was yesterday seeing in iCab 3.0.3