Two HTML tables side by side, centered on the page

Question

I have two tables on a page that I want to display side by side, and then center them within the page (actually within another div, but this is the simplest I could come up

Answer 1

The problem is that the DIV that should center your tables has no width defined. By default, DIVs are block elements and take up the entire width of their parent - in this case the entire document (propagating through the #outer DIV), so the automatic margin style has no effect.

For this technique to work, you simply have to set the width of the div that has margin:auto to anything but "auto" or "inherit" (either a fixed pixel value or a percentage).