DIV not correctly sized in TD

Discussion in 'HTML' started by boeledi, Oct 11, 2007.

  1. boeledi

    boeledi Guest

    Hello,

    I have the following problem with DIVs, embedded in table TDs.
    In two words, I would like to have one DIV per TD, each of these DIV
    taken the full size.
    Here is an example:

    <html>
    <head>
    <style>
    .clsFull {width:100%;height:100%;background-color:#ff0;border:1px
    solid #000;}
    </style>
    </head>
    <body>
    <table cellpadding=2 cellspacing=2 border=1 width=90%>
    <tr>
    <td colspan=4>
    <div class="clsFull" style="height:60px;"><p>Header</p></div>
    </td>
    </tr>
    <tr>
    <td colspan=2 width=50%>
    <div class="clsFull"><p>Left</p></div>
    </td>
    <td colspan=2 rowspan=2 width=50%>
    <div class="clsFull"><p>Right</p></div>
    </td>
    </tr>
    <tr>
    <td colspan=2 width=50%>
    <div class="clsFull" style="height:100px;"><p>Left 2</p></div>
    </td>
    </tr>
    <tr>
    <td colspan=3>
    <div class="clsFull" style="height:200px;"><p>Down Left</p></div>
    </td>
    <td width=25%>
    <div class="clsFull"><p>Down Right</p></div>
    </td>
    </tr>
    </table>
    </body>
    </html>

    The result is that everything is correct EXCEPT "Right" et "Down
    Right" parts. The corresponding DIVs are not sized correctly in the
    sense that it is not 100% width and height.

    Could anyone help me?
    Many thanks
    boeledi, Oct 11, 2007
    #1
    1. Advertising

  2. boeledi

    Andy Dingley Guest

    On 11 Oct, 13:24, boeledi <> wrote:

    > I have the following problem with DIVs, embedded in table TDs.


    So stop doing that. You can style the <td>s too, just as easily as the
    <div>s. You don't appear to be doing anything that requires these
    extra elements.


    Also you're not using a doctype declaration, so your browser will
    render in quirks mode. Before worrying about any layout problems,
    especially those involving box widths, you must push the browser into
    standards mode. I suggest adding the HTML 4.01 Strict doctype
    declaration.
    Andy Dingley, Oct 11, 2007
    #2
    1. Advertising

  3. boeledi

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Thu, 11 Oct 2007 12:24:30
    GMT boeledi scribed:

    > Hello,
    >
    > I have the following problem with DIVs, embedded in table TDs.
    > In two words, I would like to have one DIV per TD, each of these DIV
    > taken the full size.
    > Here is an example:
    >
    > <html>
    > <head>
    > <style>
    > .clsFull
    > {width:100%;height:100%;background-color:#ff0;border:1px
    > solid #000;}
    > </style>
    > </head>
    > <body>
    > <table cellpadding=2 cellspacing=2 border=1 width=90%>
    > <tr>
    > <td colspan=4>
    > <div class="clsFull"
    > style="height:60px;"><p>Header</p></div>
    > </td>
    > </tr>
    > <tr>
    > <td colspan=2 width=50%>
    > <div class="clsFull"><p>Left</p></div>
    > </td>
    > <td colspan=2 rowspan=2 width=50%>
    > <div class="clsFull"><p>Right</p></div>
    > </td>
    > </tr>
    > <tr>
    > <td colspan=2 width=50%>
    > <div class="clsFull"
    > style="height:100px;"><p>Left 2</p></div>
    > </td>
    > </tr>
    > <tr>
    > <td colspan=3>
    > <div class="clsFull"
    > style="height:200px;"><p>Down Left</p></div>
    > </td>
    > <td width=25%>
    > <div class="clsFull"><p>Down
    > Right</p></div>
    > </td>
    > </tr>
    > </table>
    > </body>
    > </html>
    >
    > The result is that everything is correct EXCEPT "Right" et "Down
    > Right" parts. The corresponding DIVs are not sized correctly in the
    > sense that it is not 100% width and height.


    Why do you have a height designation on a div in all but the 2nd row?

    Anyway, try adding a height to either the pertinent div or the cell
    within which it rests (so your percentage designation has a reference).
    This may still not work in the latter case as tables are unruly beasts,
    and you should probably nevertheless delimit your non-css values.

    --
    Neredbojias
    Half lies are worth twice as much as whole lies.
    Neredbojias, Oct 11, 2007
    #3
    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. thechaosengine

    Oddly sized sized password textbox

    thechaosengine, Sep 15, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    580
    David Hearn
    Sep 15, 2005
  2. John Dalberg
    Replies:
    3
    Views:
    556
    Ben C
    Oct 18, 2006
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    741
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    182
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    303
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page