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.
P.S. The code to reproduce the problem:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<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>