Multiple Equal Height Columns Test

Discussion in 'HTML' started by Jeff, Jan 22, 2008.

  1. Jeff

    Jeff Guest

    I need a look at a sample layout.

    I've looked around at the different ways of writing equal height
    columns. The CSS solutions with negative margins work well but presents
    problems with readability as well as maintainability. It also doesn't
    suit some needs.

    So I looked at some javascript solutions, since these degrade nicely
    if no script (the columns simply aren't equal height). I notice some
    problems with most of these with changing text size, particularly in Moz
    flavors and some padding issues.

    So I wrote my own:

    <URL: http://websiterepairguru.com/test_full_height_columns.html>

    This simply adds bottom padding as needed to make the columns equal.
    Columns with a class with equal as part of their class name are
    equalized. No limit to number, or for that matter where they are.

    I need a look in different browsers and OS's.

    All comments and some insults accepted.

    I'll clean up the code if it looks workable. I'm not correcting for
    IE5, for example. And the initiation would change.

    If you wish to try this in your own designs, any bottom padding must
    be specified in pixels (in the CSS) to be preserved correctly.

    Jeff
    Jeff, Jan 22, 2008
    #1
    1. Advertising

  2. Jeff

    Nik Coughlin Guest

    "Jeff" <jeff@spam_me_not.com> wrote in message
    news:...
    > I need a look at a sample layout.
    >
    > I've looked around at the different ways of writing equal height columns.
    > The CSS solutions with negative margins work well but presents problems
    > with readability as well as maintainability. It also doesn't suit some
    > needs.
    >
    > So I looked at some javascript solutions, since these degrade nicely if
    > no script (the columns simply aren't equal height). I notice some problems
    > with most of these with changing text size, particularly in Moz flavors
    > and some padding issues.
    >
    > So I wrote my own:
    >
    > <URL: http://websiterepairguru.com/test_full_height_columns.html>
    >
    > This simply adds bottom padding as needed to make the columns equal.
    > Columns with a class with equal as part of their class name are equalized.
    > No limit to number, or for that matter where they are.
    >
    > I need a look in different browsers and OS's.


    Looks OK:

    http://browsershots.org/http://websiterepairguru.com/test_full_height_columns.html

    I still like my solution:

    http://www.nrkn.com/3ColEqualPositioned/

    No Javascript, but as GTalbot pointed out last time I posted this, IE 7 has
    some trouble selecting text in the leftmost column (probably trivial to fix)
    and he objected to my using empty div elements for layout purposes and
    clearing of floats, as well as my mixing floats and absolute/relative
    positioning. However, of those only the IE 7 thing bothers me, and it is
    otherwise very cross browser.
    Nik Coughlin, Jan 22, 2008
    #2
    1. Advertising

  3. Jeff

    Jeff Guest

    Nik Coughlin wrote:

    Hello Nik,
    >
    > "Jeff" <jeff@spam_me_not.com> wrote in message
    > news:...
    >> I need a look at a sample layout.
    >>
    >> I've looked around at the different ways of writing equal height
    >> columns. The CSS solutions with negative margins work well but
    >> presents problems with readability as well as maintainability. It also
    >> doesn't suit some needs.
    >>
    >> So I looked at some javascript solutions, since these degrade nicely
    >> if no script (the columns simply aren't equal height). I notice some
    >> problems with most of these with changing text size, particularly in
    >> Moz flavors and some padding issues.
    >>
    >> So I wrote my own:
    >>
    >> <URL: http://websiterepairguru.com/test_full_height_columns.html>
    >>
    >> This simply adds bottom padding as needed to make the columns equal.
    >> Columns with a class with equal as part of their class name are
    >> equalized. No limit to number, or for that matter where they are.
    >>
    >> I need a look in different browsers and OS's.

    >
    > Looks OK:
    >
    > http://browsershots.org/http://websiterepairguru.com/test_full_height_columns.html


    I have to tell you, that's really impressive. And not that my code works
    but the 33 screen shots!

    And then I noticed the mouseover zoom, which was on my to do list and
    I thought, these guys are geniuses!
    >
    >
    > I still like my solution:
    >
    > http://www.nrkn.com/3ColEqualPositioned/
    >
    > No Javascript, but as GTalbot pointed out last time I posted this, IE 7
    > has some trouble selecting text in the leftmost column (probably trivial
    > to fix) and he objected to my using empty div elements for layout
    > purposes and clearing of floats, as well as my mixing floats and
    > absolute/relative positioning. However, of those only the IE 7 thing
    > bothers me, and it is otherwise very cross browser.


    Well, I like it to. It works very well, but the trouble is that I
    really don't understand it! If you find the time to explain how to set
    it up, you'll get some converts. Now, I've seen the explanation, with
    some extra rules, for a related CSS setup, and I didn't understand that
    either! I'm afraid that I'm just a simple guy.

    Jeff
    Jeff, Jan 22, 2008
    #3
  4. Jeff

    Nik Coughlin Guest

    Jeff wrote:
    > Nik Coughlin wrote:
    >>
    >> http://www.nrkn.com/3ColEqualPositioned/
    >>
    >> No Javascript, but as GTalbot pointed out last time I posted this,
    >> IE 7 has some trouble selecting text in the leftmost column
    >> (probably trivial to fix) and he objected to my using empty div
    >> elements for layout purposes and clearing of floats, as well as my
    >> mixing floats and absolute/relative positioning. However, of those
    >> only the IE 7 thing bothers me, and it is otherwise very cross
    >> browser.

    >
    > Well, I like it to. It works very well, but the trouble is that I
    > really don't understand it! If you find the time to explain how to set
    > it up, you'll get some converts. Now, I've seen the explanation, with
    > some extra rules, for a related CSS setup, and I didn't understand
    > that either! I'm afraid that I'm just a simple guy.


    columnWrapper holds two divs for each column, one for the content and one
    for the background/border etc. So the div for the left column's content is
    the one with class "left" and the one for it's background/border is the one
    with class "leftBack".

    The content columns are a fairly standard floated three column layout, and
    they have an empty div after them that clears the floats. This means that
    the parent div, columnWrapper, will always be the height of the tallest
    column.

    columnWrapper has position: relative, which means that any of its absolutely
    positioned children, such as leftBack, rightBack and middleBack, will be
    positioned relative to its boundaries. That way we can set each of the
    background columns to have a top of 0 and a bottom of 0, so that they
    stretch from the top to the bottom of the parent container called
    columnWrapper - equal height columns.

    In this instance when you set top: 0 and bottom: 0, you're saying, make the
    top of this element 0 pixels from it's parents' top, and make the bottom of
    this element 0 pixels from it's parent's bottom.

    The stuff in the IE conditional comments is because IE 6 doesn't let you set
    two absolute positions on an element that are opposite to each other, you
    can either set a top or a bottom but not both, a left or a right but not
    both. The expression corrects this. I can break this down for you too if
    you like.

    Let me know if any of that is still unclear. I've just woken up :p
    Nik Coughlin, Jan 22, 2008
    #4
  5. Jeff

    Nik Coughlin Guest

    Nik Coughlin wrote:
    > Jeff wrote:
    >> Nik Coughlin wrote:
    >>>
    >>> http://www.nrkn.com/3ColEqualPositioned/
    >>>
    >>> No Javascript, but as GTalbot pointed out last time I posted this,
    >>> IE 7 has some trouble selecting text in the leftmost column
    >>> (probably trivial to fix) and he objected to my using empty div
    >>> elements for layout purposes and clearing of floats, as well as my
    >>> mixing floats and absolute/relative positioning. However, of those
    >>> only the IE 7 thing bothers me, and it is otherwise very cross
    >>> browser.

    >>
    >> Well, I like it to. It works very well, but the trouble is that I
    >> really don't understand it! If you find the time to explain how to
    >> set it up, you'll get some converts. Now, I've seen the explanation,
    >> with some extra rules, for a related CSS setup, and I didn't
    >> understand that either! I'm afraid that I'm just a simple guy.

    >
    > columnWrapper holds two divs for each column, one for the content and
    > one for the background/border etc. So the div for the left column's
    > content is the one with class "left" and the one for it's
    > background/border is the one with class "leftBack".
    >
    > The content columns are a fairly standard floated three column
    > layout, and they have an empty div after them that clears the floats.
    > This means that the parent div, columnWrapper, will always be the
    > height of the tallest column.
    >
    > columnWrapper has position: relative, which means that any of its
    > absolutely positioned children, such as leftBack, rightBack and
    > middleBack, will be positioned relative to its boundaries. That way
    > we can set each of the background columns to have a top of 0 and a
    > bottom of 0, so that they stretch from the top to the bottom of the
    > parent container called columnWrapper - equal height columns.
    >
    > In this instance when you set top: 0 and bottom: 0, you're saying,
    > make the top of this element 0 pixels from it's parents' top, and
    > make the bottom of this element 0 pixels from it's parent's bottom.
    >
    > The stuff in the IE conditional comments is because IE 6 doesn't let
    > you set two absolute positions on an element that are opposite to
    > each other, you can either set a top or a bottom but not both, a left
    > or a right but not both. The expression corrects this. I can break
    > this down for you too if you like.
    >
    > Let me know if any of that is still unclear. I've just woken up :p


    Oh and normally the absolutely positioned background divs would sit in front
    of the content divs, which is why the content divs have position: relative
    and z-index: 1, to bring them forward.
    Nik Coughlin, Jan 22, 2008
    #5
  6. Jeff

    adwatson Guest

    That seems like a pretty clean solution to something that always
    seemed to require way more "hacking" around in css than it should. In
    the past I've just given up and used a table for it, rather than screw
    around with some of the over-complicated css versions I've seen
    floating around.

    ------
    -- Aric Watson - http://www.maxvps.com - Virtual Private Server
    hosting
    ------


    On Jan 22, 1:16 pm, "Nik Coughlin" <> wrote:
    > Nik Coughlin wrote:
    > > Jeff wrote:
    > >> Nik Coughlin wrote:

    >
    > >>>http://www.nrkn.com/3ColEqualPositioned/

    >
    > >>> No Javascript, but as GTalbot pointed out last time I posted this,
    > >>> IE 7 has some trouble selecting text in the leftmost column
    > >>> (probably trivial to fix) and he objected to my using empty div
    > >>> elements for layout purposes and clearing of floats, as well as my
    > >>> mixing floats and absolute/relative positioning. However, of those
    > >>> only the IE 7 thing bothers me, and it is otherwise very cross
    > >>> browser.

    >
    > >> Well, I like it to. It works very well, but the trouble is that I
    > >> really don't understand it! If you find the time to explain how to
    > >> set it up, you'll get some converts. Now, I've seen the explanation,
    > >> with some extra rules, for a related CSS setup, and I didn't
    > >> understand that either! I'm afraid that I'm just a simple guy.

    >
    > > columnWrapper holds two divs for each column, one for the content and
    > > one for the background/border etc. So the div for the left column's
    > > content is the one with class "left" and the one for it's
    > > background/border is the one with class "leftBack".

    >
    > > The content columns are a fairly standard floated three column
    > > layout, and they have an empty div after them that clears the floats.
    > > This means that the parent div, columnWrapper, will always be the
    > > height of the tallest column.

    >
    > > columnWrapper has position: relative, which means that any of its
    > > absolutely positioned children, such as leftBack, rightBack and
    > > middleBack, will be positioned relative to its boundaries. That way
    > > we can set each of the background columns to have a top of 0 and a
    > > bottom of 0, so that they stretch from the top to the bottom of the
    > > parent container called columnWrapper - equal height columns.

    >
    > > In this instance when you set top: 0 and bottom: 0, you're saying,
    > > make the top of this element 0 pixels from it's parents' top, and
    > > make the bottom of this element 0 pixels from it's parent's bottom.

    >
    > > The stuff in the IE conditional comments is because IE 6 doesn't let
    > > you set two absolute positions on an element that are opposite to
    > > each other, you can either set a top or a bottom but not both, a left
    > > or a right but not both. The expression corrects this. I can break
    > > this down for you too if you like.

    >
    > > Let me know if any of that is still unclear. I've just woken up :p

    >
    > Oh and normally the absolutely positioned background divs would sit in front
    > of the content divs, which is why the content divs have position: relative
    > and z-index: 1, to bring them forward.
    adwatson, Jan 22, 2008
    #6
  7. adwatson wrote:
    > That seems like a pretty clean solution to something that always
    > seemed to require way more "hacking" around in css than it should. In
    > the past I've just given up and used a table for it, rather than screw
    > around with some of the over-complicated css versions I've seen
    > floating around.
    >


    Your prerogative, however with "your way" if you decide you longer like
    2, 3, 4 columns and wish to have only one, it requires entirely redoing
    the page. With CSS, you only need to change the stylesheet if don
    properly. (Also that means you users can do the same if they choose) And
    it also means you can have it in columns for display and one column for
    printing with the same page. Cannot do that with tables...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jan 22, 2008
    #7
  8. Jeff

    Jeff Guest

    Nik Coughlin wrote:

    Hello Nik,

    Thanks for the explanation, I'm feeling off today but will go through
    a test layout later to verify that I understand. It's the first time
    I've understood this! And it looks like you have some converts, although
    I'm unsure if Jonathan is in the pro or anti group!

    Jeff

    > Nik Coughlin wrote:
    >> Jeff wrote:
    >>> Nik Coughlin wrote:
    >>>> http://www.nrkn.com/3ColEqualPositioned/
    >>>>
    >>>> No Javascript, but as GTalbot pointed out last time I posted this,
    >>>> IE 7 has some trouble selecting text in the leftmost column
    >>>> (probably trivial to fix) and he objected to my using empty div
    >>>> elements for layout purposes and clearing of floats, as well as my
    >>>> mixing floats and absolute/relative positioning. However, of those
    >>>> only the IE 7 thing bothers me, and it is otherwise very cross
    >>>> browser.
    >>> Well, I like it to. It works very well, but the trouble is that I
    >>> really don't understand it! If you find the time to explain how to
    >>> set it up, you'll get some converts. Now, I've seen the explanation,
    >>> with some extra rules, for a related CSS setup, and I didn't
    >>> understand that either! I'm afraid that I'm just a simple guy.

    >> columnWrapper holds two divs for each column, one for the content and
    >> one for the background/border etc. So the div for the left column's
    >> content is the one with class "left" and the one for it's
    >> background/border is the one with class "leftBack".
    >>
    >> The content columns are a fairly standard floated three column
    >> layout, and they have an empty div after them that clears the floats.
    >> This means that the parent div, columnWrapper, will always be the
    >> height of the tallest column.
    >>
    >> columnWrapper has position: relative, which means that any of its
    >> absolutely positioned children, such as leftBack, rightBack and
    >> middleBack, will be positioned relative to its boundaries. That way
    >> we can set each of the background columns to have a top of 0 and a
    >> bottom of 0, so that they stretch from the top to the bottom of the
    >> parent container called columnWrapper - equal height columns.
    >>
    >> In this instance when you set top: 0 and bottom: 0, you're saying,
    >> make the top of this element 0 pixels from it's parents' top, and
    >> make the bottom of this element 0 pixels from it's parent's bottom.
    >>
    >> The stuff in the IE conditional comments is because IE 6 doesn't let
    >> you set two absolute positions on an element that are opposite to
    >> each other, you can either set a top or a bottom but not both, a left
    >> or a right but not both. The expression corrects this. I can break
    >> this down for you too if you like.
    >>
    >> Let me know if any of that is still unclear. I've just woken up :p

    >
    > Oh and normally the absolutely positioned background divs would sit in front
    > of the content divs, which is why the content divs have position: relative
    > and z-index: 1, to bring them forward.
    >
    >
    Jeff, Jan 22, 2008
    #8
  9. Jeff

    dorayme Guest

    In article <>,
    Jeff <jeff@spam_me_not.com> wrote:

    > I need a look at a sample layout.
    >
    > I've looked around at the different ways of writing equal height
    > columns. The CSS solutions with negative margins work well but presents
    > problems with readability as well as maintainability. It also doesn't
    > suit some needs.
    >
    > So I looked at some javascript solutions, since these degrade nicely
    > if no script (the columns simply aren't equal height). I notice some
    > problems with most of these with changing text size, particularly in Moz
    > flavors and some padding issues.
    >
    > So I wrote my own:
    >
    > <URL: http://websiterepairguru.com/test_full_height_columns.html>
    >
    > This simply adds bottom padding as needed to make the columns equal.
    > Columns with a class with equal as part of their class name are
    > equalized. No limit to number, or for that matter where they are.
    >
    > I need a look in different browsers and OS's.
    >
    > All comments and some insults accepted.
    >
    > I'll clean up the code if it looks workable. I'm not correcting for
    > IE5, for example. And the initiation would change.
    >
    > If you wish to try this in your own designs, any bottom padding must
    > be specified in pixels (in the CSS) to be preserved correctly.
    >
    > Jeff



    Don't forget simple tactics where they can be used:

    http://netweaver.com.au/alt/equalColsSimpleTactic.html

    (just adapted from yours but not adjusted for IE)

    --
    dorayme
    dorayme, Jan 22, 2008
    #9
  10. Jeff

    Jeff Guest

    dorayme wrote:
    > In article <>,
    > Jeff <jeff@spam_me_not.com> wrote:
    >
    >> I need a look at a sample layout.
    >>
    >> I've looked around at the different ways of writing equal height
    >> columns. The CSS solutions with negative margins work well but presents
    >> problems with readability as well as maintainability. It also doesn't
    >> suit some needs.
    >>
    >> So I looked at some javascript solutions, since these degrade nicely
    >> if no script (the columns simply aren't equal height). I notice some
    >> problems with most of these with changing text size, particularly in Moz
    >> flavors and some padding issues.
    >>
    >> So I wrote my own:
    >>
    >> <URL: http://websiterepairguru.com/test_full_height_columns.html>
    >>
    >> This simply adds bottom padding as needed to make the columns equal.
    >> Columns with a class with equal as part of their class name are
    >> equalized. No limit to number, or for that matter where they are.
    >>
    >> I need a look in different browsers and OS's.
    >>
    >> All comments and some insults accepted.
    >>
    >> I'll clean up the code if it looks workable. I'm not correcting for
    >> IE5, for example. And the initiation would change.
    >>
    >> If you wish to try this in your own designs, any bottom padding must
    >> be specified in pixels (in the CSS) to be preserved correctly.
    >>
    >> Jeff

    >
    >
    > Don't forget simple tactics where they can be used:
    >
    > http://netweaver.com.au/alt/equalColsSimpleTactic.html
    >
    > (just adapted from yours but not adjusted for IE)
    >


    Well that's rather clever and I'll add it to my bag of tricks.

    There are a few caveats, usually you don't know for sure which column
    is going to be tallest. Since we are all doing CMS, it's not completely
    predictable. And you can't do full height borders.

    Jeff
    Jeff, Jan 22, 2008
    #10
  11. Jeff wrote:
    > Nik Coughlin wrote:
    >
    > Hello Nik,
    >
    > Thanks for the explanation, I'm feeling off today but will go through
    > a test layout later to verify that I understand. It's the first time
    > I've understood this! And it looks like you have some converts, although
    > I'm unsure if Jonathan is in the pro or anti group!


    Not sure what you mean, pro or anti for what? Aside of some damn typos
    in my message I don't think anyone would think that I was advocating
    "table layouts".

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jan 23, 2008
    #11
  12. Jeff

    dorayme Guest

    In article <>,
    Jeff <jeff@spam_me_not.com> wrote:

    > dorayme wrote:
    > > In article <>,
    > > Jeff <jeff@spam_me_not.com> wrote:
    > >
    > >> I need a look at a sample layout.
    > >>
    > >> I've looked around at the different ways of writing equal height
    > >> columns. The CSS solutions with negative margins work well but presents
    > >> problems with readability as well as maintainability. It also doesn't
    > >> suit some needs.
    > >>
    > >> So I looked at some javascript solutions, since these degrade nicely
    > >> if no script (the columns simply aren't equal height). I notice some
    > >> problems with most of these with changing text size, particularly in Moz
    > >> flavors and some padding issues.
    > >>
    > >> So I wrote my own:
    > >>
    > >> <URL: http://websiterepairguru.com/test_full_height_columns.html>
    > >>

    ....
    > >
    > > Don't forget simple tactics where they can be used:
    > >
    > > http://netweaver.com.au/alt/equalColsSimpleTactic.html
    > >
    > > (just adapted from yours but not adjusted for IE)
    > >

    >
    > Well that's rather clever and I'll add it to my bag of tricks.
    >
    > There are a few caveats, usually you don't know for sure which column
    > is going to be tallest. Since we are all doing CMS, it's not completely
    > predictable. And you can't do full height borders.


    OK, I have added a couple of extras. Borders in the spirit of
    this thing! Notice how the main wrapper has one and the central
    col just left and right. On my Safari and FF they go all the way
    from top to bottom.

    <http://netweaver.com.au/alt/equalColsSimpleTactic.html>

    This sort of thing should more or less work with em widthings.
    The borders account for so little and if you give some leeway
    (especially for IE), and throw in an em for padding instead of
    px, Bob could be your uncle.

    The reality is that often we simply do know that the central col
    is longest or at least which one is... Sometimes it all comes
    down to the particular task at hand and while it is instructive
    to go for grail, reality is often disappointingly more prosaic.

    (Bag of tricks is a nice expression, our brains are all a bag of
    little sub machines, all with their own routines, all scrambling
    about trying to get things done... It is an illusion or a conceit
    to suppose there is something, the self, the id, the higher
    consciousness, the person, in control. The awful frightening
    truth is that there is nothing in control even in our heads,
    never mind there being no god. Rejoice in the low little tricks,
    they are the stuff of mental life. <g>)

    --
    dorayme
    dorayme, Jan 23, 2008
    #12
    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. Nik Coughin
    Replies:
    9
    Views:
    598
    Nik Coughlin
    Nov 30, 2004
  2. Nik Coughlin
    Replies:
    0
    Views:
    647
    Nik Coughlin
    May 15, 2007
  3. Fister
    Replies:
    21
    Views:
    856
    Neredbojias
    Jan 7, 2008
  4. Matt White

    DIVs of Equal Height

    Matt White, Aug 6, 2008, in forum: HTML
    Replies:
    8
    Views:
    542
    dorayme
    Aug 9, 2008
  5. Replies:
    2
    Views:
    232
    Thomas 'PointedEars' Lahn
    Aug 5, 2008
Loading...

Share This Page