Update to my old 3 column layout template

Discussion in 'HTML' started by Toby A Inkster, Jan 3, 2008.

  1. 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/
     
    Toby A Inkster, Jan 3, 2008
    #1
    1. Advertising

  2. Toby A Inkster

    J.O. Aho Guest

    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
     
    J.O. Aho, Jan 3, 2008
    #2
    1. Advertising

  3. Toby A Inkster

    Els Guest

    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/
     
    Els, Jan 3, 2008
    #3
  4. Toby A Inkster

    J.O. Aho Guest

    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
     
    J.O. Aho, Jan 3, 2008
    #4
  5. Toby A Inkster

    Els Guest

    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/
     
    Els, Jan 3, 2008
    #5
  6. 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
     
    Jonathan N. Little, Jan 3, 2008
    #6
  7. 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/
     
    Toby A Inkster, Jan 3, 2008
    #7
  8. 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/
     
    Toby A Inkster, Jan 3, 2008
    #8
  9. Toby A Inkster

    richard Guest

    On Thu, 3 Jan 2008 14:34:28 +0000, 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?)
    >


    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.
     
    richard, Jan 3, 2008
    #9
  10. Toby A Inkster

    dorayme Guest

    In article <5n.co.uk>,
    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
     
    dorayme, Jan 3, 2008
    #10
  11. Toby A Inkster

    Baho Utot Guest

    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
     
    Baho Utot, Jan 3, 2008
    #11
  12. 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
     
    Disco Octopus, Jan 3, 2008
    #12
  13. 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/
     
    Toby A Inkster, Jan 4, 2008
    #13
  14. 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/
     
    Toby A Inkster, Jan 4, 2008
    #14
  15. Toby A Inkster

    Neredbojias Guest

    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.
     
    Neredbojias, Jan 4, 2008
    #15
  16. 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
     
    Jonathan N. Little, Jan 4, 2008
    #16
  17. Toby A Inkster

    dorayme Guest

    In article <5n.co.uk>,
    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
     
    dorayme, Jan 4, 2008
    #17
  18. 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.
     
    Travis Newbury, Jan 4, 2008
    #18
  19. Toby A Inkster

    Els Guest

    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/
     
    Els, Jan 4, 2008
    #19
  20. Toby A Inkster

    dorayme Guest

    In article <1ndghdkvcp4ap$>,
    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
     
    dorayme, Jan 4, 2008
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rick Spiewak
    Replies:
    3
    Views:
    3,166
    Rick Spiewak
    Aug 26, 2003
  2. Replies:
    1
    Views:
    598
    John Timney \(MVP\)
    Jun 19, 2006
  3. Jim Hill
    Replies:
    3
    Views:
    408
    Jim Hill
    Feb 12, 2007
  4. *Prot3anThr3ad*

    old repository for old C++ source code

    *Prot3anThr3ad*, Sep 29, 2006, in forum: C++
    Replies:
    6
    Views:
    384
    *Prot3anThr3ad*
    Oct 2, 2006
  5. John Henry
    Replies:
    24
    Views:
    1,020
    alex23
    May 30, 2008
Loading...

Share This Page