centering 3 tables on a page

[james438]

I have 3 tables of variable widths depending on the text used in each column. the tables are side by side. I want to horizontally center the three tables on a page.

I tried placing the tables in a div and set the left and right margins to auto. The problem with this method was that the tables could not be floated and removing the floats stacked the tables.

I can't set the width of the div because the tables have variable widths.

Any ideas?

[mlegg]

where is your code or page it's on?

edit, I misread, though it was one table with 3 columns

[james438]

Got it.

I need to use the following css:


<style type="text/css">
.a1{left:50%;float:left;position:relative;}
.a2{float:left;left:-50%;position:relative;}
</style>

First, there is the parent div with a class of 'a1'. The three tables are placed in their own divs inside the parent div and each has a class of 'a2'.

I got the tip from: http://pmob.co.uk/pob/centred-float.htm (http://pmob.co.uk/pob/centred-float.htm).

[james438]

After using the above css I have created a page [link removed], which is a sample of a page I use in my admin panel where I can view and edit the various tags used on my website.

When you view the page you can see that the the page scrolls a little to the right. It should not do this. Any ideas on how I can fix this or what is causing it? I notice that decreasing the number of tags seems to fix this, but that doesn't make much sense to me.

Most likely I will delete the test page when this problem is figured out.