How take two columns the same height?

Discussion in 'HTML' started by Jens Lenge, Apr 6, 2007.

  1. Jens Lenge

    Jens Lenge Guest

    Hello world,

    although this sounds like a FAQ to me, a have found no answer yet: How
    can I make two columns the same height in a CSS-based layout without
    using a table and without specifying a *fixed* height?
    Both columns have a fixed width and adjust their height so that the
    respective content fits in. Now the smaller height should be increased
    so that both columns have the same height.

    Can this be done with CSS only?

    Small example:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"/>
    <title>Example</title>
    </head>
    <body>
    <div style="border: 1px solid black">
    <div style="float:left; width:120px; background-color:red">
    This is column #1.<br>
    This is column #1.<br>
    This is column #1.<br>
    This is column #1.<br>
    This is column #1.<br>
    .... (more content)
    </div>
    <div style="float:right; width:120px; background-color:green">
    This is column #2.<br>
    This is column #2.<br>
    .... (more content)
    </div>
    How to make the red and green columns have the same height?
    </div>
    </body>
    </html>
     
    Jens Lenge, Apr 6, 2007
    #1
    1. Advertising

  2. Jens Lenge

    Ben C Guest

    On 2007-04-06, Jens Lenge <> wrote:
    > Hello world,
    >
    > although this sounds like a FAQ to me, a have found no answer yet: How
    > can I make two columns the same height in a CSS-based layout without
    > using a table and without specifying a *fixed* height?
    > Both columns have a fixed width and adjust their height so that the
    > respective content fits in. Now the smaller height should be increased
    > so that both columns have the same height.
    >
    > Can this be done with CSS only?


    Not really, you're right that you need a table to link the heights of
    two columns together like that.

    Having said, there is a clever trick that will work in your case:

    See:

    http://groups.google.co.uk/group/alt.html/msg/ab5d96b7ce967612?hl=en&

    Simply, add this in a <style> element in HEAD:

    ..magic
    {
    margin-bottom: -10000px;
    padding-bottom: 10000px;
    background-color: inherit;
    }

    And then then put <div class="magic"></div> first thing in each of the
    floats; or use :before as in Maik Wiege's example if you don't want to
    pollute your semantically pure HTML with the magic divs.

    Finally, add <div style="overflow: hidden"> ... </div> around the whole
    lot.

    > Small example:
    >
    ><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    ><html>
    ><head>
    ><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"/>
    ><title>Example</title>
    ></head>
    ><body>
    ><div style="border: 1px solid black">
    ><div style="float:left; width:120px; background-color:red">
    > This is column #1.<br>
    > This is column #1.<br>
    > This is column #1.<br>
    > This is column #1.<br>
    > This is column #1.<br>
    > ... (more content)
    ></div>
    ><div style="float:right; width:120px; background-color:green">
    > This is column #2.<br>
    > This is column #2.<br>
    > ... (more content)
    ></div>
    > How to make the red and green columns have the same height?
    ></div>
    ></body>
    ></html>
     
    Ben C, Apr 6, 2007
    #2
    1. Advertising

  3. Jens Lenge

    Andy Dingley Guest

    On Fri, 06 Apr 2007 20:58:24 +0200, Jens Lenge <> wrote:

    >How can I make two columns the same height in a CSS-based layout


    The best way is to use a <table>. This is the way for HTML+ CSS to
    switch on a grid-based rendering mode, wherein adjacent columns set
    their heights according to their neighbours, and they still calculate
    their height from their content. This does what you need and it _works_.

    You can also (in theory) set the CSS display property to a number of
    table-like values. This would allow any elements to be made to behave in
    this grid-like manner. However this feature was intended for use with
    XML+CSS, not for styling HTML. and so browser support for it with HTML
    is poor. HTML also has a perfectly good grid-like elemtn, it's called
    "<table>".

    You can't do it with CSS otherwise. You can set two boxes to be of equal
    height, by setting their heights separately. You need to set this to be
    either an explicit fixed height, or as a proportion of a common
    container. Either way breaks the elements' ability to set their own
    height automatically, based on their content.

    There are JavaScript hacks to make the size of one element track
    another. That's a hack.

    No doubt someone will have others too, but you should probably use
    <table> (if you want auto-sizing based on content).
     
    Andy Dingley, Apr 6, 2007
    #3
  4. Jens Lenge wrote:
    > Hello world,
    >
    > although this sounds like a FAQ to me, a have found no answer yet: How
    > can I make two columns the same height in a CSS-based layout without
    > using a table and without specifying a *fixed* height?


    no need to use tables for such a problem. this can be achieved within
    CSS without a lot of magic.
    With a simple trick this can be done with pure CSS: if you ask yourself
    what is it that makes your two columns the same height, then you're
    almost at the answer: it's the color of both columns (eg. green and
    red), and not the actual height of the columns.

    1.) Now the trick is to make the two columns transparent
    (background-color:transparent;)
    2.) then create a 1px-height GIF image containing a 120px long section
    of red pixels and a 120px long section of green pixels, resulting in a
    1px x 240px long GIF.
    3.) place this GIF in the container div that holds the two coloumns as a
    background-image:

    background-image:url(1x240.gif);
    background-repeat:repeat-y;

    Now you have the perfect illusion of two columns always of the same
    height, regardless of the amount of content the two columns contain...

    HTH
    bernhard




    --
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Apr 6, 2007
    #4
  5. Jens Lenge

    Bergamot Guest

    Jens Lenge wrote:
    >
    > can I make two columns the same height in a CSS-based layout without
    > using a table and without specifying a *fixed* height?


    Yes, you can. It's done using borders, floats, and negative margins.
    http://webhost.bridgew.edu/etribou/layouts/

    There is a 2-column example in there somewhere.

    --
    Berg
     
    Bergamot, Apr 6, 2007
    #5
  6. Jens Lenge

    andrew Guest

    On Fri, 06 Apr 2007 20:58:24 +0200
    Jens Lenge <> wrote:

    > Hello world,
    >
    > although this sounds like a FAQ to me, a have found no answer yet:
    > How can I make two columns the same height in a CSS-based layout
    > without using a table and without specifying a *fixed* height?
    > Both columns have a fixed width and adjust their height so that the
    > respective content fits in. Now the smaller height should be
    > increased so that both columns have the same height.
    >
    > Can this be done with CSS only?

    [...]

    Hi Jens,

    Is it not easier to fake it rather than indulge in hugely athletic CSS
    and HTML? My own example (which does not acyually have fixed width
    columns, although ths is a trivial matter to change) has 2 columns that
    are _not_ equal height but _appear_ to be:

    http://people.aapt.net.au/~adjlstrong/template_2.html


    Andrew


    --
    Andrew's Corner
    http://people.aapt.net.au/~adjlstrong/
     
    andrew, Apr 7, 2007
    #6
  7. Adrienne Boswell, Apr 7, 2007
    #7
  8. Jens Lenge

    andrew Guest

    andrew, Apr 7, 2007
    #8
  9. Jens Lenge

    Seth Illgard Guest

    Seth Illgard, Apr 7, 2007
    #9
  10. Jens Lenge

    Jens Lenge Guest

    From the replies I learned that there are basically two ways to solve
    the issue:

    1. Use a table.

    2. Leave the "true" height of the columns different and just make them
    appear the same by a background color that comes from either a
    background image or the border color of another div.

    I think I need to play with the different solutions to become a bit more
    experienced. Thanks for your hints!

    Jens
     
    Jens Lenge, Apr 7, 2007
    #10

  11. >
    > 1. Use a table.
    >
    > 2. Leave the "true" height of the columns different and just make them
    > appear the same by a background color that comes from either a
    > background image or the border color of another div.
    >


    I would choose the solution that degrades most perfectly on various
    UA-environemnts, and doesn't involve a lot of 'non-standard'-hacks (and
    don't rely on java-script solutions, as you might get in trouble with
    handheld UAs)

    cheers
    bernhard


    --
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Apr 7, 2007
    #11
    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. Replies:
    0
    Views:
    581
  2. Wotney
    Replies:
    1
    Views:
    549
    Flinky Wisty Pomm
    Oct 25, 2006
  3. tshad
    Replies:
    1
    Views:
    1,733
    bruce barker
    Mar 8, 2007
  4. Bernd Meier
    Replies:
    6
    Views:
    546
    GTalbot
    Jan 14, 2008
  5. samer
    Replies:
    3
    Views:
    460
    Gregory A. Beamer
    Sep 28, 2009
Loading...

Share This Page