Absolute width vs. Percentage

Discussion in 'HTML' started by Todd Cary, Sep 4, 2003.

  1. Todd Cary

    Todd Cary Guest

    In the code below, if I use an absolute width (e.g. width="168"), in
    fact, any value, the column does not change. If I use percentage, it
    does change. Why is this?

    Todd

    <table width="100%" border="1" cellpadding="0" cellspacing="0"
    align="left" valign="top">
    <!-- Begin Header -->
    <tr>
    <td width="15%" align="left">
    <img height="105" alt="" src="images/Logo.gif" width="168">
    </td>
    <td>
    <table width="100%" border="1" cellpadding="0" cellspacing="0">
    <tr>
    <td width="100%" align="center">
    <img src="images/Banner.jpg" ALT="" width=580 height=59>
    </td>
    </tr>
    <tr>
    <td bgcolor="#336699" width="100%" align="center">
    <p class="white">
    Sub-title can go here
    </p>
    </td>
    <!-- Column to "pad" display -->
    <td>
    &nbsp;&nbsp;
    </td>
    </tr>
    </table>
    </td>
    </tr>
    <!-- End Header -->
    </table>
     
    Todd Cary, Sep 4, 2003
    #1
    1. Advertising

  2. Todd Cary

    Nico Schuyt Guest

    Todd Cary wrote:
    > In the code below, if I use an absolute width (e.g. width="168"), in
    > fact, any value, the column does not change. If I use percentage, it
    > does change. Why is this?


    Because a percentage is relative to the environment (for example screen
    size). If the environment changes, the object changes too.
    Advantage is that the design is 'flexible'
    Regards, Nico
     
    Nico Schuyt, Sep 4, 2003
    #2
    1. Advertising

  3. Todd Cary

    Todd Cary Guest

    Nico -

    I understand the "relative" nature of using percentages; in fact, I use
    "100%" for the width of the outer table so that it will "size" to the
    screen.

    What I do unerstand is why using an absolute value in that one "width
    attribute" has no effect, yet in all of the other "width attributes" on
    the page, it does. For the column in question, an absolute would be
    appropriate since the image is 168 wide, however for some unknown (at
    least to me) absolutes have no effect in this one place.

    Curious.....

    Todd

    Nico Schuyt wrote:
    > Todd Cary wrote:
    >
    >>In the code below, if I use an absolute width (e.g. width="168"), in
    >>fact, any value, the column does not change. If I use percentage, it
    >>does change. Why is this?

    >
    >
    > Because a percentage is relative to the environment (for example screen
    > size). If the environment changes, the object changes too.
    > Advantage is that the design is 'flexible'
    > Regards, Nico
    >
    >
     
    Todd Cary, Sep 4, 2003
    #3
  4. Todd Cary

    Richard Guest

    Todd Cary wrote:>>

    > In the code below, if I use an absolute width (e.g. width="168"), in
    > fact, any value, the column does not change. If I use percentage, it
    > does change. Why is this?


    You begin with by setting the main table to 100% of the screen which is
    fine.
    Then you have a nested table set set to 15%, leaving 85% free.
    Now within that second table you create another table and set it to 100%
    expcecting that to be the width of the screen as well. Wrong. The new 100%
    is the same as the 15% of the main table.
    What's 100% of 15%? 15%.
    A nested table can not go outside of the boundaries of the table in which it
    is created.

    If you have the main table set to 90%, then an inner table set to 100%, you
    will have two tables exactly the same width, minus a pixel or two for
    borders.
     
    Richard, Sep 4, 2003
    #4
  5. Todd Cary

    John W. Guest

    Todd Cary <>:

    >In the code below, if I use an absolute width (e.g. width="168"), in
    >fact, any value, the column does not change. If I use percentage, it
    >does change. Why is this?
    >
    >Todd
    >
    ><table width="100%" border="1" cellpadding="0" cellspacing="0"
    >align="left" valign="top">
    > <!-- Begin Header -->
    > <tr>
    > <td width="15%" align="left">
    > <img height="105" alt="" src="images/Logo.gif" width="168">
    > </td>
    > <td>
    > <table width="100%" border="1" cellpadding="0" cellspacing="0">
    > <tr>
    > <td width="100%" align="center">
    > <img src="images/Banner.jpg" ALT="" width=580 height=59>
    > </td>
    > </tr>
    > <tr>
    > <td bgcolor="#336699" width="100%" align="center">
    > <p class="white">
    > Sub-title can go here
    > </p>
    > </td>
    > <!-- Column to "pad" display -->
    > <td>
    > &nbsp;&nbsp;
    > </td>
    > </tr>
    > </table>
    > </td>
    > </tr>
    > <!-- End Header -->
    ></table>


    The (2nd) table, which contains the banner.jpg, has 1 tablecell in the
    first row and 2 tablecells in the second row, that is not right.
    Every row has to have the same number of tablecells, i.e. you will
    have to make the first cell span 2 cols.

    Change your code, look in a table-manual for the word * colspan*.



    John OO
    --

    <http://webcel.nl/>
    <http://www.webcel.nl/bayshop/shop/bayshop.html>

    "Time is what prevents everything from happening at once"
    - John Archibald Wheeler -
     
    John W., Sep 4, 2003
    #5
    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. AndrewF
    Replies:
    1
    Views:
    785
    Bruce Barker
    Oct 10, 2005
  2. Wladimir Borsov
    Replies:
    7
    Views:
    21,450
    eswar
    Apr 20, 2012
  3. eagle

    Dynamically set the width of the grid by percentage

    eagle, Dec 1, 2005, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    113
    eagle
    Dec 1, 2005
  4. Elizabeth

    Percentage width for cells in web Datagrid

    Elizabeth, Jul 19, 2006, in forum: ASP .Net Datagrid Control
    Replies:
    1
    Views:
    175
    addup
    Jul 20, 2006
  5. James Byrne
    Replies:
    3
    Views:
    565
    James Byrne
    Sep 14, 2010
Loading...

Share This Page