here is an example of a container (a div) containing a table.
<html> <head><title>Tab-div</title></head> <body> <div style="border:1px solid red;padding:10px;"> <table style="border:3px solid blue;"> <tr> <td style="border:1px solid green;padding:2px;">111111111111111111111111</td> <td style="border:1px solid green;padding:2px;">222222222222222222222222</td> <td style="border:1px solid green;padding:2px;">333333333333333333333333</td> <td style="border:1px solid green;padding:2px;">444444444444444444444444</td> </tr> </table> </div> </body> <html>
In that case, the div doesn't care about its content and if the window of the browser in smaller than the table content, the div cuts the table on the right side.
I put in attachement the screenshot that show the div cutting the table on the right.
I found a solution that solves the problem : if I set the css property display of the div to "display:table" or "display:inline-block" the div doesn't cut the table anymore, but I find that is more an hack than a clean solution (the good solution should be "display:table-block" but it doesn't exist).
What are you thinking about this problem ?
PS : all of this involve firefox, I didn't yet test the behavior on ie6.
This is correct default
This is correct default behavior. The div takes up all available width (default display: block; width: auto) and the contents, which are wider, simply overflow the div. So you need to change the way the div normally contains it's children. As you've discovered, display: table; will do this as will floating the div.
I agree with your answer.