CSS DIV Height Problem

Discussion in 'CSS' started by chris_moden, Mar 20, 2007.

  1. #1
    Hi all,

    I've got a small problem, and can't think of a way of getting around it.
    Ive made a site with alot of css, and most of the page layout is css generated. Here is the page....

    http://www.web-design-studios.com/torksey-caravans/used-caravans.html

    Now heres my problem. Ive designed it all in divs, and want both the divs down the side (the faded blue to green blocks) to always be 100% of the page in height, so if the content within the central div is higher, the two divs at each side always adjust and lengthen to 100% of the page height.

    Now I've got the div at the left hand side to always be 100% in height which is great, but i cant get the right hand side to play ball. I know why this is (because its a separate div with no content 100% height isn't necessarily 100% of the page), but cant think of a work around.

    Any help would be muchly appreciated as ive tried everything i can think of... even moving the div elsewhere within the page.

    Thanks
    Chris :)
     
    chris_moden, Mar 20, 2007 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Due to IE's poor support of css2 (1998), we're forced into work-arounds and downright kluges. The simplest is a technique called "faux columns" (Google is your friend). It fakes equal height columns. You may see an example on my 2 column apparent equal height demo.

    cheers,

    gary
     
    kk5st, Mar 20, 2007 IP
  3. Greg-J

    Greg-J I humbly return to you.

    Messages:
    1,844
    Likes Received:
    153
    Best Answers:
    0
    Trophy Points:
    135
    #3
    Greg-J, Mar 20, 2007 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    @Greg-J

    The page you linked has a very nice intro to the issue. I'm not at all a fan of a javascript solution to the problem, but I will thank you for the read.

    Now, if we could only kill that one pig of a browser that's holding us all back. :)

    cheers,

    gary
     
    kk5st, Mar 20, 2007 IP
  5. Greg-J

    Greg-J I humbly return to you.

    Messages:
    1,844
    Likes Received:
    153
    Best Answers:
    0
    Trophy Points:
    135
    #5
    I can respect not liking to use javascript as a solution. I used to wince at the thought, but the more I use libraries like jQuery the more I start to turn to javascript to solve the issues I come across.

    I'd much rather just erase IE from existence though ;)
     
    Greg-J, Mar 20, 2007 IP