Not without a table: 3 column, equal height with background-images

Discussion in 'HTML' started by Nik Coughin, Nov 30, 2004.

  1. Nik Coughin

    Nik Coughin Guest

    I have a feeling that this isn't possible without using a table. I would
    love to be proven wrong.

    No layout tables; fluid width; 3 columns of equal height, each with a
    different tiled background-image; works in IE.

    Using a table:
    http://www.nrkn.com/3col/

    Someone, please, please, please prove me wrong. So far as I can tell it's
    not possible.

    It's not the 3 columns. It's not the equal height. Those two are easy.
    It's those two *and* different tiling backgrounds for each column *and*
    works in IE that I can't seem to get.
    Nik Coughin, Nov 30, 2004
    #1
    1. Advertising

  2. Nik Coughin

    Nik Coughin Guest

    Nik Coughin wrote:
    > I have a feeling that this isn't possible without using a table. I
    > would love to be proven wrong.
    >
    > No layout tables; fluid width; 3 columns of equal height, each with a
    > different tiled background-image; works in IE.
    >
    > Using a table:
    > http://www.nrkn.com/3col/
    >
    > Someone, please, please, please prove me wrong. So far as I can tell
    > it's not possible.
    >
    > It's not the 3 columns. It's not the equal height. Those two are
    > easy. It's those two *and* different tiling backgrounds for each
    > column *and* works in IE that I can't seem to get.


    Actually, it turned out to be really easy. Will post the results in a
    moment.
    Nik Coughin, Nov 30, 2004
    #2
    1. Advertising

  3. Nik Coughin

    Nik Coughin Guest

    Nik Coughin wrote:
    > Nik Coughin wrote:
    >> I have a feeling that this isn't possible without using a table. I
    >> would love to be proven wrong.
    >>
    >> No layout tables; fluid width; 3 columns of equal height, each with a
    >> different tiled background-image; works in IE.
    >>
    >> Using a table:
    >> http://www.nrkn.com/3col/
    >>
    >> Someone, please, please, please prove me wrong. So far as I can tell
    >> it's not possible.
    >>
    >> It's not the 3 columns. It's not the equal height. Those two are
    >> easy. It's those two *and* different tiling backgrounds for each
    >> column *and* works in IE that I can't seem to get.

    >
    > Actually, it turned out to be really easy. Will post the results in a
    > moment.


    I'm kicking myself. That was so easy.

    http://www.nrkn.com/3colCss/
    Nik Coughin, Nov 30, 2004
    #3
  4. On Tue, 30 Nov 2004 20:24:16 +1300, Nik Coughin
    <nrkn!no-spam!@woosh.co.nz> wrote:

    > Nik Coughin wrote:
    >> Nik Coughin wrote:
    >>> I have a feeling that this isn't possible without using a table. I
    >>> would love to be proven wrong.
    >>>
    >>> No layout tables; fluid width; 3 columns of equal height, each with a
    >>> different tiled background-image; works in IE.
    >>>
    >>> Using a table:
    >>> http://www.nrkn.com/3col/
    >>>
    >>> Someone, please, please, please prove me wrong. So far as I can tell
    >>> it's not possible.
    >>>
    >>> It's not the 3 columns. It's not the equal height. Those two are
    >>> easy. It's those two *and* different tiling backgrounds for each
    >>> column *and* works in IE that I can't seem to get.

    >>
    >> Actually, it turned out to be really easy. Will post the results in a
    >> moment.

    >
    > I'm kicking myself. That was so easy.
    >
    > http://www.nrkn.com/3colCss/
    >
    >


    I'm not sure what you are trying to acomplish. In Opera (7.55) I see a
    header and a footer and a huge black void between those two. Is that what
    you want me to see?

    --
    Weblog | <http://home.wanadoo.nl/b.de.zoete/_private/weblog.html>
    Webontwerp | <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html>
    Zweefvliegen | <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html>
    Barbara de Zoete, Nov 30, 2004
    #4
  5. Nik Coughin

    Nik Coughlin Guest

    Barbara de Zoete wrote:
    > On Tue, 30 Nov 2004 20:24:16 +1300, Nik Coughin
    > <nrkn!no-spam!@woosh.co.nz> wrote:
    >
    >> Nik Coughin wrote:
    >>> Nik Coughin wrote:
    >>>> I have a feeling that this isn't possible without using a table. I
    >>>> would love to be proven wrong.
    >>>>
    >>>> No layout tables; fluid width; 3 columns of equal height, each
    >>>> with a different tiled background-image; works in IE.
    >>>>
    >>>> Using a table:
    >>>> http://www.nrkn.com/3col/
    >>>>
    >>>> Someone, please, please, please prove me wrong. So far as I can
    >>>> tell it's not possible.
    >>>>
    >>>> It's not the 3 columns. It's not the equal height. Those two are
    >>>> easy. It's those two *and* different tiling backgrounds for each
    >>>> column *and* works in IE that I can't seem to get.
    >>>
    >>> Actually, it turned out to be really easy. Will post the results
    >>> in a moment.

    >>
    >> I'm kicking myself. That was so easy.
    >>
    >> http://www.nrkn.com/3colCss/
    >>
    >>

    >
    > I'm not sure what you are trying to acomplish. In Opera (7.55) I see a
    > header and a footer and a huge black void between those two. Is that
    > what you want me to see?


    That's very strange, it works fine from both Opera 7.55 at my work and Opera
    7.21 at home (yeah, I know, should get around to updating it). Also works
    in Firefox, and IE 6...

    ....and according to our good friend browsercam, works in everything except
    for the browsers that I usually hide css from anyway:

    http://www.browsercam.com/public.aspx?proj_id=116592
    Nik Coughlin, Nov 30, 2004
    #5
  6. Nik Coughin

    Nik Coughlin Guest

    Barbara de Zoete wrote:
    > On Tue, 30 Nov 2004 20:24:16 +1300, Nik Coughin
    > <nrkn!no-spam!@woosh.co.nz> wrote:
    >
    >> Nik Coughin wrote:
    >>> Nik Coughin wrote:
    >>>> I have a feeling that this isn't possible without using a table. I
    >>>> would love to be proven wrong.
    >>>>
    >>>> No layout tables; fluid width; 3 columns of equal height, each
    >>>> with a different tiled background-image; works in IE.
    >>>>
    >>>> Using a table:
    >>>> http://www.nrkn.com/3col/
    >>>>
    >>>> Someone, please, please, please prove me wrong. So far as I can
    >>>> tell it's not possible.
    >>>>
    >>>> It's not the 3 columns. It's not the equal height. Those two are
    >>>> easy. It's those two *and* different tiling backgrounds for each
    >>>> column *and* works in IE that I can't seem to get.
    >>>
    >>> Actually, it turned out to be really easy. Will post the results
    >>> in a moment.

    >>
    >> I'm kicking myself. That was so easy.
    >>
    >> http://www.nrkn.com/3colCss/
    >>
    >>

    >
    > I'm not sure what you are trying to acomplish. In Opera (7.55) I see a
    > header and a footer and a huge black void between those two. Is that
    > what you want me to see?


    It's because you have images turned off and I forgot to set a background
    color for the central div. Doesn't matter, it's not a real page, I just
    wanted to see if I could do the 3 column/background images thing. Thanks
    for that anyway.
    Nik Coughlin, Nov 30, 2004
    #6
  7. On Tue, 30 Nov 2004 21:36:23 +1300, Nik Coughlin <nrkn!hopefully no
    spam!@woosh.co.nz> wrote:

    > Barbara de Zoete wrote:
    >> On Tue, 30 Nov 2004 20:24:16 +1300, Nik Coughin
    >> <nrkn!no-spam!@woosh.co.nz> wrote:
    >>
    >>> Nik Coughin wrote:
    >>>> Nik Coughin wrote:
    >>>>> I have a feeling that this isn't possible without using a table. I
    >>>>> would love to be proven wrong.
    >>>>>
    >>>>> No layout tables; fluid width; 3 columns of equal height, each
    >>>>> with a different tiled background-image; works in IE.
    >>>>>
    >>>>> Using a table:
    >>>>> http://www.nrkn.com/3col/
    >>>>>
    >>>>> Someone, please, please, please prove me wrong. So far as I can
    >>>>> tell it's not possible.
    >>>>>
    >>>>> It's not the 3 columns. It's not the equal height. Those two are
    >>>>> easy. It's those two *and* different tiling backgrounds for each
    >>>>> column *and* works in IE that I can't seem to get.
    >>>>
    >>>> Actually, it turned out to be really easy. Will post the results
    >>>> in a moment.
    >>>
    >>> I'm kicking myself. That was so easy.
    >>>
    >>> http://www.nrkn.com/3colCss/
    >>>
    >>>

    >>
    >> I'm not sure what you are trying to acomplish. In Opera (7.55) I see a
    >> header and a footer and a huge black void between those two. Is that
    >> what you want me to see?

    >
    > It's because you have images turned off and I forgot to set a background
    > color for the central div. Doesn't matter, it's not a real page, I just
    > wanted to see if I could do the 3 column/background images thing. Thanks
    > for that anyway.
    >


    Well, you might have learned something from this anyway :)


    --
    Weblog | <http://home.wanadoo.nl/b.de.zoete/_private/weblog.html>
    Webontwerp | <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html>
    Zweefvliegen | <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html>
    Barbara de Zoete, Nov 30, 2004
    #7
  8. Nik Coughin

    Richard Guest

    Nik Coughin wrote:

    > I have a feeling that this isn't possible without using a table. I would
    > love to be proven wrong.


    > No layout tables; fluid width; 3 columns of equal height, each with a
    > different tiled background-image; works in IE.


    > Using a table:
    > http://www.nrkn.com/3col/


    > Someone, please, please, please prove me wrong. So far as I can tell
    > it's not possible.


    > It's not the 3 columns. It's not the equal height. Those two are easy.
    > It's those two *and* different tiling backgrounds for each column *and*
    > works in IE that I can't seem to get.


    Do the same thing using CSS.
    Then it is not limited to only IE.

    A division is a table cell. Predefine the division's properties.
    Your coding may look like this:
    <div> container
    <div> column 1 </div>
    <div> column 2 </div>
    <div> column 3 <div>
    </div>

    The reason for the container division is to prevent the column cells from
    wrapping when the window is resized.
    With a division, you can insert backgrounds and images with ease.
    Change the look of one without effecting the others,

    Looking at your source coding, it looks you've got the right idea going,
    just using the wrong items.
    As you'll find soon out, you'll have your head chopped off around here for
    daring to use tables, let alone mentioning them.
    Richard, Nov 30, 2004
    #8
  9. Nik Coughin

    Nik Coughlin Guest

    Richard wrote:
    > Nik Coughin wrote:
    >
    >> I have a feeling that this isn't possible without using a table. I
    >> would love to be proven wrong.

    >
    >> No layout tables; fluid width; 3 columns of equal height, each with a
    >> different tiled background-image; works in IE.

    >
    >> Using a table:
    >> http://www.nrkn.com/3col/

    >
    >> It's not the 3 columns. It's not the equal height. Those two are
    >> easy. It's those two *and* different tiling backgrounds for each
    >> column *and* works in IE that I can't seem to get.

    >
    > Do the same thing using CSS.
    > Then it is not limited to only IE.


    Er, what the hell?

    > A division is a table cell.


    No it's not.

    Haven't seen you around here for a while Richard.

    Re-read my post, then read the follow-ups.
    Nik Coughlin, Nov 30, 2004
    #9
  10. Nik Coughin

    Nik Coughlin Guest

    Barbara de Zoete wrote:
    > On Tue, 30 Nov 2004 21:36:23 +1300, Nik Coughlin <nrkn!hopefully no
    > spam!@woosh.co.nz> wrote:
    >
    >> Barbara de Zoete wrote:
    >>> On Tue, 30 Nov 2004 20:24:16 +1300, Nik Coughin
    >>> <nrkn!no-spam!@woosh.co.nz> wrote:
    >>>
    >>>> Nik Coughin wrote:
    >>>>> Nik Coughin wrote:
    >>>>>> I have a feeling that this isn't possible without using a table.
    >>>>>> I would love to be proven wrong.
    >>>>>>
    >>>>>> No layout tables; fluid width; 3 columns of equal height, each
    >>>>>> with a different tiled background-image; works in IE.
    >>>>>>
    >>>>>> Using a table:
    >>>>>> http://www.nrkn.com/3col/
    >>>>>>
    >>>>>> Someone, please, please, please prove me wrong. So far as I can
    >>>>>> tell it's not possible.
    >>>>>>
    >>>>>> It's not the 3 columns. It's not the equal height. Those two
    >>>>>> are easy. It's those two *and* different tiling backgrounds for
    >>>>>> each column *and* works in IE that I can't seem to get.
    >>>>>
    >>>>> Actually, it turned out to be really easy. Will post the results
    >>>>> in a moment.
    >>>>
    >>>> I'm kicking myself. That was so easy.
    >>>>
    >>>> http://www.nrkn.com/3colCss/
    >>>>
    >>>>
    >>>
    >>> I'm not sure what you are trying to acomplish. In Opera (7.55) I
    >>> see a header and a footer and a huge black void between those two.
    >>> Is that what you want me to see?

    >>
    >> It's because you have images turned off and I forgot to set a
    >> background color for the central div. Doesn't matter, it's not a
    >> real page, I just wanted to see if I could do the 3
    >> column/background images thing. Thanks for that anyway.
    >>

    >
    > Well, you might have learned something from this anyway :)


    Ack, I am usually pretty religious about things like that. It's a slippery
    slope... :)
    Nik Coughlin, Nov 30, 2004
    #10
    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. savvy
    Replies:
    1
    Views:
    461
    savvy
    Jan 18, 2006
  2. Replies:
    0
    Views:
    540
  3. Nik Coughlin
    Replies:
    0
    Views:
    647
    Nik Coughlin
    May 15, 2007
  4. john T
    Replies:
    7
    Views:
    211
    Richard Formby
    Feb 19, 2004
  5. Replies:
    2
    Views:
    232
    Thomas 'PointedEars' Lahn
    Aug 5, 2008
Loading...

Share This Page