Centering side-by-side elements.

[Michdd]

Is there a way to place to 2 elements side-by-side while keeping them both centered? Not separately centered, obviously but collectively. Say there's 2 tables side by side (possibly using floats?) and centering them.

[Axeia]

Just put them in a container the width of both your elements and float that in the middle?

[Masna]

Put them in a super container and apply the following to said container:

 

margin-left: auto;
margin-right: auto;

 

Don't forget to use float: left on the elements you want to place side by side, and give them distinct widths (whether by percentage or invariable pixels).

[TheFilmGod]

This might get complicated. Depending on if both boxes are fixed widths or not, a "super" parent container may or may not worked.

 

You need a fixed width to center using margion: 0 auto;

 

If you don't have a fixed width, you could utilize some awesome css2! Display: table; Doesn't work in IE7, but IE8 finally supports it.

[dbrimlow]

You need a fixed width to center using margion: 0 auto;

 

Actually, you just need a declared width that is smaller than its parent container - it could be pixel (fixed) or percentage (fluid).

 

The whole point of "margin: 0 auto" is top and bottom are "0" and right and left are "auto". It is the "auto"  that determines how far each side's margin should be based on the container's declared width in relation to its parent container's width. If no width is declared, then 100% is assumed. There are no margins of a box that is 100% the width of its parent (there is nothing to auto calculate to).