CSS - 2 divs of equal height

Discussion in 'Web Design and Development' started by cooknwitha, Feb 9, 2006.

  1. macrumors 6502a

    cooknwitha

    Joined:
    May 5, 2005
    Location:
    London
    #1
    It's question time again.

    I'm trying to create a website with a thin left div which will be the menu and the other big fat div alongside it will be the content.

    Is there any way of making the thin menu div to be the same length as the big content div?

    Obiously the content div goes all the way down to the bottom of the page no matter how much it has written there but the menu div would need a big blank area at the bottom for that to happen.

    Any ideas how to make that happen?
     
  2. macrumors newbie

    Joined:
    Apr 15, 2005
    Location:
    Cracow, Poland
    #2
  3. Moderator emeritus

    Mitthrawnuruodo

    Joined:
    Mar 10, 2004
    Location:
    Bergen, Norway
    #3
    You could experiment with the height property. But that is a bit troublesome, and not 100% supported (bad pun ;)), and it usually requires some experimentation to get it working (especially on IE for Win).

    You would probably need some sort of a #wrapper div around the two other divs for this to work (because of the need for a specified "containing block"), and then set height on your left and content divs to 100%.

    Good luck... ;)
     
  4. thread starter macrumors 6502a

    cooknwitha

    Joined:
    May 5, 2005
    Location:
    London
    #4
    That's the thing about Flash, Web Design and all things like this, it's all about problem solving and that alistapart example is perfect! How sneaky!!

    Thanks for pointing it out jakubpawlowicz

    And Mitthrawnuruodo, I was experimenting my brains out with the height property. It just wasn't being my friend! :)
     
  5. macrumors 65816

    Joined:
    Apr 10, 2003
    Location:
    mi
  6. macrumors 68000

    kgarner

    Joined:
    Jan 28, 2004
    Location:
    Utah
    #6

Share This Page