1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

100% height div inside a variable height TD

Discussion in 'CSS' started by Kolyana, May 5, 2005.

0
  1. #1
    Hi guys,

    I did a search, but I can't find an answer to this here or elsewhere on the internet.

    My question is a little different from the usual "100% height floating liquid doodad", because I 'simply' want a div inside a table cell that will occupy the full height of that cell, regardless of what it may be.

    I don't want the TD to be 100% height and I can't assign a fixed height, because essentially it's just going to expand according to content in another cell.

    There is a link to a screenshot of the problem here:
    http://img50.echo.cx/img50/1469/ieproblem8zx.jpg

    I'm using this doctype:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    And the table html is simply 3 columns, 3 rows of 100% width.
    #mainTable
    {
    width: 100%;
    border: 10px solid #fff;
    padding: 0px;
    margin: 0px;
    }

    Again, I *don't* want the table to be 100% height of the view port.

    The second row is ultimately my main content area, so it's the row that will expand according to the amount of text in the center TD. I now want to place a DIV in the left-middle TD and have it set to 100% height:
    #navigation
    {
    background-image: url(../images/Navigation_Background.jpg);
    background-repeat: repeat-y;
    width: 143px;
    height: 100%;
    border-bottom: 1px solid #293F6F;
    }

    This works in Firefox, but *NOT* in ie and nothing I have tried so far - including adding 100% height to various parent elements - is working. I am *not* adverse to a Javascript solution, I just want something that works.
     
    Kolyana, May 5, 2005 IP
  2. Arnica

    Arnica Peon

    Messages:
    320
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Why not assign the background image to the <td> containing the navigation block?

    Mick
     
    Arnica, May 5, 2005 IP
  3. itpartner

    itpartner Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    you can try with parent div css like:

     
    itpartner, Feb 11, 2010 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    1) Arnica has it right, why is it a separate div

    2) TD's do not report their height for percentage calculations - so the answer is NO on doing what you want.

    3) Tables for columns? You should have been told when it comes time to use a doctype it's time to STOP pretending it's still 1997. Table for layout == /FAIL/. What you PROBABLY should be using is a float model with div, using a faux-column image. (or multiple images if fluid width)

    Oh, and your image link is 404.
     
    deathshadow, Feb 13, 2010 IP