Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    No-wrap table expands over a container div

    Hello!

    On an IPB forum page layout I have a relatively small table without a set width — so it should shrink (or "expand" — depending on your point of view) to the size of its content inside.

    Within that table there is a DIV whose width is set to 90%. Within that DIV there is another table with cells having nowrap="nowrap" set, so each row is displayed on one line.

    So, the inner table is making up the actual content and the actual width. The problem is the way how the browsers calculate the widths of the DIV and outer table.

    Namely, the outer table's width is set to the inner table's width, and the DIV's width is then calculated as 90% of the outer table's (not the other way around which would seem the correct way for me: set the DIV's width to the inner table's width, and then calculate the outer table's width so that the DIV would take 90% of it).

    Thus the inner table content actually flows over the DIV in FF, Opera, Chrome, as the DIV's width is now calculated smaller then that of the table it contains.

    In IE it seems that DIV's width is then actually increased to contain the inner table on the expense of ignoring the set width (from 90% to 100%).

    What is this problem? Could someone, please, point me to where it has been described — I couldn't find it myself.

    Thank you!

    P.S. The code to reproduce the problem:

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>nowrap test</title>
    </head>
    <body>
    
    <table><tr><td style="background: #eeeeee">
    <div style="background: #dddddd; width: 90%; border:1px solid #aaaaaa;">
    text in div<br /><br />
    
    <table style="background: #ffcccc;">
    <tr><td style="background: #ccccff;" nowrap="nowrap">text in 2nd table</td></tr>
    </table>
    
    </div>
    
    </td></tr>
    </table>
    
    </body>
    </html>

  • #2
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    dont mean to burst your bubble. but putting divs in tables is blasphemy.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •