Update to my old 3 column layout template

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/

Re: Update to my old 3 column layout template

Toby A Inkster wrote:

> * 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.



--

//Aho

Re: Update to my old 3 column layout template

Toby A Inkster wrote:

> 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.

--
Els http://locusmeus.com/

Re: Update to my old 3 column layout template

Els wrote:
> Toby A Inkster wrote:
>
>> 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.

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.


--

//Aho

Re: Update to my old 3 column layout template

J.O. Aho wrote:

> Els wrote:
>> Toby A Inkster wrote:
>>
>>> 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.
>
> 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)

--
Els http://locusmeus.com/

Re: Update to my old 3 column layout template

Els wrote:
> Toby A Inkster wrote:
>
>> 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.
>

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.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: Update to my old 3 column layout template

J.O. Aho wrote:

> 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/

Re: Update to my old 3 column layout template

Els wrote:

> 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/

Re: Update to my old 3 column layout template

Post removed (X-No-Archive: yes)

Re: Update to my old 3 column layout template

In article ,
Toby A Inkster wrote:

> 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!

--
dorayme

Re: Update to my old 3 column layout template

Toby A Inkster wrote:

> Els wrote:
>
>> Freezes my IE7 (Windows XP Home).
>
> Bonus! ;-)
>

Would that be perfect?

--
Dancin in the ruins tonight
Tayo'y Mga Pinoy

Re: Update to my old 3 column layout template

On Jan 4, 1:34 am, Toby A Inkster
wrote:
> 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

Re: Update to my old 3 column layout template

dorayme wrote:

> 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/

Re: Update to my old 3 column layout template

Els wrote:

> 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/

Re: Update to my old 3 column layout template

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

> Els wrote:
>
>> 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

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

--
Neredbojias
Riches are their own reward.

Re: Update to my old 3 column layout template

Neredbojias wrote:
> Well bust mah britches and call me cheeky, on Fri, 04 Jan 2008 14:59:20 GMT
> Toby A Inkster scribed:
>
>> Els wrote:
>>
>>> 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
>
> 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...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: Update to my old 3 column layout template

In article ,
Toby A Inkster wrote:

> dorayme wrote:
>
> > 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.)
>
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?

> > 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.

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

--
dorayme

Re: Update to my old 3 column layout template

On Jan 3, 9:34 am, Toby A Inkster
wrote:
> 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.

Re: Update to my old 3 column layout template

Toby A Inkster wrote:
> Els wrote:
>
>> Freezes my IE7 (Windows XP Home).
>
> 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.

--
Els http://locusmeus.com/

Re: Update to my old 3 column layout template

In article <1ndghdkvcp4ap$.1pqhqjw3bcg4.dlg@40tude.net>,
Els wrote:

> Toby A Inkster wrote:
> > Els wrote:
> >
> >> Freezes my IE7 (Windows XP Home).
> >
> > 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 ;-)
>

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?

> > 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.

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

--
dorayme

Re: Update to my old 3 column layout template

Toby A Inkster wrote in
news:77u155-c21.ln1@ophelia.g5n.co.uk:

> Els wrote:
>
>> 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

Have a look at this script. Give it a go and see how it works for you.

It's self contained, no need for that bit of script after the closing
body tag.

[url] http://tinyurl.com/yugyul [/url]
[url] http://preview.tinyurl.com/yugyul [/url]

--
BootNic Friday January 4, 2008 8:06 PM
When I was younger, I could remember anything, whether it had
happened or not.
*Mark Twain*

Re: Update to my old 3 column layout template

BootNic wrote:

> Have a look at this script. Give it a go and see how it works for you.

I'll give it a whirl, but at first glance it looks a little over-
complicated. From what I can tell, your stability fix is to prevent the
column resize function from being dispatched several times simultaneously
or near-simultaneously.

The font size check is a good idea.

> It's self contained, no need for that bit of script after the closing
> body tag.

The decision to make my script not self-contained was deliberate. It
avoids hard-coding the element IDs into the javascript file. It also
allows the functions to fire prior to window.onload.

--
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 6 days, 11:11.]

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

Re: Update to my old 3 column layout template

Toby A Inkster wrote in
news:ohi555-vbq.ln1@ophelia.g5n.co.uk:

> BootNic wrote:
>
>> Have a look at this script. Give it a go and see how it works for
>> you.
>
> I'll give it a whirl, but at first glance it looks a little over-
> complicated. From what I can tell, your stability fix is to prevent
> the column resize function from being dispatched several times
> simultaneously or near-simultaneously.

That would be the most important to limit how many times the columns are
resized. It also prevents the columns from being resize if the
documentElement offset Height/Width has not changed.

The main issue is that some browsers fire multiple resize events on one
resizing of the UA.

IE and Opera, if I not mistaken, always fire twice for one resize. That
in its self is not a big issue for just a maximize/restore situation. It
does become an issue when the UA is resized with the mouse, depending on
the speed of the UA resize, it could be something like 50 or more resize
events being fired within a few milliseconds.

I have created a simple example that counts resize events that can be
played with.

Although this example does not do much when a resize event is fired, it
may still be possible to lock up IE.

[url] http://tinyurl.com/yujuf4 [/url]
[url] http://preview.tinyurl.com/yujuf4 [/url]

> The font size check is a good idea.
>
>> It's self contained, no need for that bit of script after the closing
>> body tag.
>
> The decision to make my script not self-contained was deliberate. It
> avoids hard-coding the element IDs into the javascript file. It also
> allows the functions to fire prior to window.onload.

The IDs can still be in a separate js file, right off I would suggest an
addition of a global array to hold the ID's and loop through them in
place of setting them in the onload function.

js file for ID's :
var IDs = ['left', 'right', 'main'];

then in colStack change the following:

colStack[0] = document.getElementById('left');
colStack[1] = document.getElementById('right');
colStack[2] = document.getElementById('main');

to:
for (var e=0; e colStack.push(document.getElementById(IDs[e]));
/* If for some reason you would like to avoid the array.push
colStack[e] = document.getElementById(IDs[e])
*/
}

As for the firing before the onload event, I would really be surprised if
the time saved for the effort in this example would exceed 100
milliseconds.

--
BootNic Sunday January 6, 2008 11:14 AM
"No man's life, liberty, or property is safe while the legislature
is in session."
*Judge Gideon J. Tucker, 1866.*

Re: Update to my old 3 column layout template

BootNic wrote:

> As for the firing before the onload event, I would really be surprised
> if the time saved for the effort in this example would exceed 100
> milliseconds.

Indeed, but if you start adding images, then it becomes more significant.

--
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 7 days, 17:55.]

New BBC Home Page
http://tobyinkster.co.uk/blog/2008/01/07/bbc-home-page/