views:

50

answers:

1

Given markup like this:

<body>
  <div style='text-align:center'>header</div>
  <table>
    <tr><td>
      really_wide_table................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
    </td></tr>
  </table>
</body>

How should it be rendered if the table is so wide that horizontal scrollbars are introduced?

Should the header div be centered in the left-most visible screen, or centered above the table? Or something else?

Note: I know what does happen, what I'm looking for is an official reference that defines what should happen (I ran into an issue).

+2  A: 

A div is a block element and by definition has its default width set to 100% of it's parent container. The parent container in this case is the visible part of the browser window.

So no matter how wide (or how narrow; try it) the table below (or any element for that matter), the div will still fill 100% of the visible browser window.

Since the div is as wide as the window, it will appear centered in the window.

I don't have any "official" reference to this but I do know this is how the DOM and CSS specifications work.

T Pops
I'll second that. If you want something to appear centered to the size of the table, it will need to be inside the table.
Shawn Steward