100% height of a div inside a TD

Discussion in 'HTML' started by Lamberti Fabrizio, Aug 29, 2005.

  1. I've got the problem described in the table above.

    I've put a div red with some text inside a TD, but its height is less than 100% of TD height as you can see.

    I've defined the following styles:

    div.test { background-color:red; height:100%; width: 100%; }
    table.test { border: 1px solid #CCCCCC; background-color:yellow; }
    td.test { border: 1px solid #CCCCCC; }

    does anyone know a solution ?

    Please help me.

    Regards to all

    2
    2b 1
    4 5
    7 8
    Lamberti Fabrizio, Aug 29, 2005
    #1
    1. Advertising

  2. The table example is this:

    2
    2b 1
    4 5
    7 8



    "Lamberti Fabrizio" <._cut_off> wrote in message news:T4zQe.91323$...

    I've got the problem described in the table above.

    I've put a div red with some text inside a TD, but its height is less than 100% of TD height as you can see.

    I've defined the following styles:

    div.test { background-color:red; height:100%; width: 100%; }
    table.test { border: 1px solid #CCCCCC; background-color:yellow; }
    td.test { border: 1px solid #CCCCCC; }

    does anyone know a solution ?

    Please help me.

    Regards to all

    2
    2b 1
    4 5
    7 8
    Lamberti Fabrizio, Aug 29, 2005
    #2
    1. Advertising

  3. __/ [Lamberti Fabrizio] on Monday 29 August 2005 08:51 \__


    Hi Lamberti,

    I have read your message twice, but I still fail to grasp what you are
    trying to achieve, why, and how.

    > The table example is this:
    >
    > 2
    > 2b 1
    > 4 5
    > 7 8



    What is the symbolic meaning of the digits? Could you pad it with some
    hyphens ("-") and vertical pipes ("|")?


    > I've got the problem described in the table above.



    Have you got a URL where this can be viewed? Code and rendered HTML is
    easier to appraise/criticise.


    > I've put a div red with some text inside a TD, but its height is less than
    > 100% of TD height as you can see.


    It is not good practice to embed divs in table cells.

    I fail to see it, but maybe somebody else can visualise it more easily than
    me.


    > I've defined the following styles:
    >
    > div.test { background-color:red; height:100%; width: 100%; }
    > table.test { border: 1px solid #CCCCCC; background-color:yellow; }
    > td.test { border: 1px solid #CCCCCC; }



    It would be helpful to see the corresponding HTML so that we can view it our
    browsers.


    > does anyone know a solution ?
    >
    > Please help me.
    >
    > Regards to all
    >
    > 2
    > 2b 1
    > 4 5
    > 7 8



    I sincerely wish to help, but I would argue that you did not provide enough
    clear information. I could venture some guesses, but will not be able to
    test the outcome as I lack the corresponding (X)HTML code.

    Roy
    Roy Schestowitz, Aug 29, 2005
    #3
  4. Lamberti Fabrizio

    Els Guest

    Lamberti Fabrizio wrote:

    > The table example is this:


    That's not a table.
    Even if I open the HTML version of this post (do not send as html
    again!) I don't see a table.

    Upload your example somewhere on a server, and give the URL.
    That way we can see what is happening.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Aug 29, 2005
    #4
  5. sorry this is the table:

    2
    2b 1
    4 5
    7 8
    Lamberti Fabrizio, Aug 29, 2005
    #5
  6. Lamberti Fabrizio

    Els Guest

    Lamberti Fabrizio wrote:

    > sorry this is the table:
    >
    > 2
    > 2b 1
    > 4 5
    > 7 8


    What you are showing there, is /not/ a table, and is even less capable
    of showing any height problems.

    Give us a URL to a real live example.

    Also:
    You're not reading what I wrote.
    And you're not quoting what I wrote either, that may have something to
    do with that.

    Please quote what it is you are replying to, do not post in HTML, and
    read a post before you reply to it.

    TIA.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Aug 29, 2005
    #6
  7. __/ [Lamberti Fabrizio] on Monday 29 August 2005 09:50 \__

    > sorry this is the table:
    >
    > 2
    > 2b 1
    > 4 5
    > 7 8


    You mean /this/?

    ==================================

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML><HEAD>
    <META http-equiv=Content-Type content="text/html; charset=utf-8">
    <META content="MSHTML 6.00.2800.1515" name=GENERATOR>
    <STYLE></STYLE>
    </HEAD>
    <BODY>
    <STYLE>
    div.test {
    background-color:red;
    height:100%;
    width: 100%;
    }
    span.test {
    background-color:blue;
    height:100%;
    width:100%;
    }
    table.test {
    border: 1px solid #CCCCCC;
    background-color:yellow;
    }
    td.test {
    border: 1px solid #CCCCCC;
    }
    </STYLE>

    <STYLE>
    div.test {
    background-color:red;
    height:100%;
    width: 100%;
    }

    span.test {
    background-color:blue;
    height:100%;
    width:100%;
    }
    table.test {
    border: 1px solid #CCCCCC;
    background-color:yellow;
    }
    td.test {
    border: 1px solid #CCCCCC;
    }
    </STYLE>

    <TABLE class=test id=Table1 cellSpacing=0 cellPadding=0
    width=300 border=0>
    <TBODY>
    <TR>
    <TD class=test>2<BR>2b</TD>
    <TD class=test>
    <DIV class=test>1</DIV></TD></TR>
    <TR>
    <TD class=test>4</TD>
    <TD class=test>5</TD></TR>
    <TR>
    <TD class=test>7</TD>
    <TD=20
    class=test>8</TD></TR></TBODY></TABLE></DIV></FONT></DIV></DIV></BODY></HTML>

    ==================================

    In UseNet, you should never post HTML messages. It causes confusion and
    results on chaos. The above is _not_ a copy extracted from the source (Els
    and others, you can copy and paste the above to view). I had to clean up
    about 30 invalid characters just to be able to view it as a page.

    I think what you want is <td valign="center"> or an equivalent in pure CSS.

    Hope it helps,

    Roy

    --
    Roy S. Schestowitz /earth: file system full
    http://Schestowitz.com
    Roy Schestowitz, Aug 29, 2005
    #7
  8. Lamberti Fabrizio

    Els Guest

    Roy Schestowitz wrote:

    > __/ [Lamberti Fabrizio] on Monday 29 August 2005 09:50 \__
    >
    >> sorry this is the table:
    >>
    >> 2
    >> 2b 1
    >> 4 5
    >> 7 8

    >
    > You mean /this/?
    >
    > ==================================


    [snip code]

    > ==================================
    >
    > In UseNet, you should never post HTML messages. It causes confusion and
    > results on chaos. The above is _not_ a copy extracted from the source (Els
    > and others, you can copy and paste the above to view). I had to clean up
    > about 30 invalid characters just to be able to view it as a page.


    Thanks, Roy :)

    Lamberti: the reason the height of 100% isn't obeyed by IE, is that
    you didn't say 100% of what. The TD hasn't a set height.
    To get both IE and other browsers to obey, feed IE a 1px height to the
    TD. Like so:
    td.test{_height:1px;} (the underscore makes the style invisible for
    anything but WinIE)

    Best is though to not want a div in a table cell for colour. Just set
    the colour to the table cell itself.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Aug 29, 2005
    #8
  9. >
    > Lamberti: the reason the height of 100% isn't obeyed by IE, is that
    > you didn't say 100% of what. The TD hasn't a set height.
    > To get both IE and other browsers to obey, feed IE a 1px height to the
    > TD. Like so:
    > td.test{_height:1px;} (the underscore makes the style invisible for
    > anything but WinIE)
    >


    Simple and perfect solution...thnx

    > Best is though to not want a div in a table cell for colour. Just set
    > the colour to the table cell itself.
    >

    I know but it's necessary to use a DIV in this case
    Lamberti Fabrizio, Aug 29, 2005
    #9
    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. Not4u
    Replies:
    9
    Views:
    1,039
    Not4u
    Feb 27, 2004
  2. Replies:
    8
    Views:
    6,687
    Neredbojias
    Dec 9, 2005
  3. Lamberti Fabrizio

    100% height of a div inside a TD

    Lamberti Fabrizio, Aug 28, 2005, in forum: ASP General
    Replies:
    3
    Views:
    308
    Dave Anderson
    Aug 29, 2005
  4. fred
    Replies:
    3
    Views:
    273
    Zifud
    Mar 17, 2005
  5. Replies:
    5
    Views:
    880
Loading...

Share This Page