extending divs in height to the longest of the two.

Discussion in 'HTML' started by windandwaves, Nov 15, 2006.

  1. windandwaves

    windandwaves Guest

    Hi Gurus

    Consider you have two divs:

    <div style="float: left; width: 300px; background-color: red;">
    Donec quam odio, hendrerit ut, commodo vel, egestas quis, leo. Morbi
    fermentum. Morbi congue, mi a interdum consectetuer, pede lorem
    vehicula dui, sit amet blandit tellus nisl in orci. Nullam est urna,
    varius quis, eleifend euismod, ultricies sed, dui.
    </div>

    <div style="margin-left: 310px; width: 300px; background-color:
    yellow;">
    Praesent placerat nunc eget lectus. Etiam sit amet ipsum. Nulla arcu
    felis, posuere ornare, commodo vel, feugiat ac, libero. Cras eget elit
    sit amet nisi imperdiet pretium. Nulla condimentum eros a ipsum
    interdum dictum. Nulla facilisi. Proin sed lectus. Cras ut nulla.
    </div>


    If I made the same two-column setup in a table I would be sure that
    both columns would be equally long. This would be great, because it
    would mean that the background-colors would go down equally far down
    the page.

    However, with the divs, the background-color stops where the text
    stops. I can think of several ways to resolve this, but I was
    wondering if there is a "best practice" solution.

    The solutions I can think of are:
    1. put in a min-height in the css (does not work in all browsers)
    2. put in an invisible image that makes the div a mininum height
    3. specificy height for both divs

    All of the solutions above have the problem that they dont allow very
    well for people with increased (or decreased font-sizes). I would
    prefer if both divs would take on the length of the longest of the two
    divs, thereby reaching nicely to the end of the text.

    What can you recommend?

    TIA

    > Nicolaas
     
    windandwaves, Nov 15, 2006
    #1
    1. Advertising

  2. windandwaves

    dorayme Guest

    In article
    <>,
    "windandwaves" <> wrote:

    > Hi Gurus
    >
    > Consider you have two divs:
    >
    > <div style="float: left; width: 300px; background-color: red;">
    > Donec quam odio, hendrerit ut, commodo vel, egestas quis, leo. Morbi
    > fermentum. Morbi congue, mi a interdum consectetuer, pede lorem
    > vehicula dui, sit amet blandit tellus nisl in orci. Nullam est urna,
    > varius quis, eleifend euismod, ultricies sed, dui.
    > </div>
    >
    > <div style="margin-left: 310px; width: 300px; background-color:
    > yellow;">
    > Praesent placerat nunc eget lectus. Etiam sit amet ipsum. Nulla arcu
    > felis, posuere ornare, commodo vel, feugiat ac, libero. Cras eget elit
    > sit amet nisi imperdiet pretium. Nulla condimentum eros a ipsum
    > interdum dictum. Nulla facilisi. Proin sed lectus. Cras ut nulla.
    > </div>
    >
    >
    > If I made the same two-column setup in a table I would be sure that
    > both columns would be equally long. This would be great, because it
    > would mean that the background-colors would go down equally far down
    > the page.
    >
    > However, with the divs, the background-color stops where the text
    > stops. I can think of several ways to resolve this, but I was
    > wondering if there is a "best practice" solution.
    >
    > The solutions I can think of are:
    > 1. put in a min-height in the css (does not work in all browsers)
    > 2. put in an invisible image that makes the div a mininum height
    > 3. specificy height for both divs
    >
    > All of the solutions above have the problem that they dont allow very
    > well for people with increased (or decreased font-sizes). I would
    > prefer if both divs would take on the length of the longest of the two
    > divs, thereby reaching nicely to the end of the text.
    >
    > What can you recommend?
    >


    (1) If it is very important to you and nothing else works, use a
    table for layout.

    (2) If you can, don't want them both cols to have different
    coloured backgrounds and end up equal lengths. Design around what
    it is natural to design with, given the awkwardness of the tools.
    Make a virtue out of the natural lengths they end up. There is an
    honesty in letting the colour finish when there is no more
    content to provide a useful background for. There are even
    aesthetic arguments I can think of here that go beyond the "all
    nice and tidy, divorced from function, pretty pretty" along the
    lines of marrying form with function.

    (3) Use the strategies you mention and talk to different browsers
    via hacks, conditionals etc in your html and css. Perhaps look at
    <http://alistapart.com/articles/fauxcolumns/> if you have not
    already done so. Also
    <http://www.ilovejackdaniels.com/css/faux-columns-for-liquid-layou
    ts/>

    --
    dorayme
     
    dorayme, Nov 15, 2006
    #2
    1. Advertising

  3. windandwaves

    Bergamot Guest

    Bergamot, Nov 15, 2006
    #3
  4. windandwaves

    windandwaves Guest

    wow

    Thanks a million to both of you. I have learned so much!

    That is css advanced. GREAT
     
    windandwaves, Nov 16, 2006
    #4
    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. rich
    Replies:
    0
    Views:
    756
  2. ll
    Replies:
    1
    Views:
    351
    Neredbojias
    Aug 1, 2007
  3. Matt White

    DIVs of Equal Height

    Matt White, Aug 6, 2008, in forum: HTML
    Replies:
    8
    Views:
    562
    dorayme
    Aug 9, 2008
  4. Damian Profancik

    Problem with dynamic iframe height and hidden divs

    Damian Profancik, Sep 29, 2004, in forum: Javascript
    Replies:
    0
    Views:
    110
    Damian Profancik
    Sep 29, 2004
  5. maya
    Replies:
    4
    Views:
    266
Loading...

Share This Page