Home/ Questions/Q 4339066
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T11:10:00+00:00

In the example below, also available here , both WebKit (Safari 5, Chrome 10.0.648.205)

  • 0

In the example below, also available here, both WebKit (Safari 5, Chrome 10.0.648.205) and Mozilla (FF 4) keep DIV div around the visible width of the browser window, while the TABLE is as wide as its content.

I would expect the DIV to grow as wide as the TABLE, but since the behavior is consistent across browsers, I suspect this is a feature rather than a bug.

Interestingly, if the DIV is set to have float:left, it does grow as wide as the table.

Any explanations?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Wide Table</title>
<style>

#container {
    background-color:blue;
/*    float:left;*/
}

</style>
</head>
<body>
  <div id="container">
    <table >
       <tr id="tr">
         <td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td>
       </tr>
    </table>
  </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Block elements take the width of their parent by default, not the width of their content; height on the other hand, works the other way around: block elements take the height of their content by default rather than the height of their parent. Things work this way because HTML/CSS is built around the usual top-to-bottom layout of English text.

    So, your #container takes the width of <body> and then the <table> inside #container overflows outside #container. If you put overflow: hidden on #container you’ll clip the <table>, overflow-x: auto; on #container will add a scrollbar.

    UPDATE: As far as floating elements are concerned, the CSS3 spec has this to say:

    The used value of ‘width’ is the computed value, unless that is ‘auto’, when used value is the shrink-to-fit width.

    The default width will be auto so shrink-to-fit it is:

    Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks.

    There are no possible line breaks in your <table> so the floated #container will take on the entire width of its <table> child.

    • 0