Centering data without using tables

I have a website I am trying to make to display network graphs for sites on our network. We want to be able to add sites to the page with ease without having to edit a hundred tables.

I was able to get float:left/right to do what I want but I can't get it to center in the center of the screen.

I found a blog suggesting to use left:50% and left:-50% on two divs to center it and it worked perfectly in IE, but the data was off the edge of the screen in Firefox and Chrome.

Do I have any other options?

Hello jghake,
To center an element you need three things:

A DocType Declaration (see the link in my sig about doctypes)
An element with a width
That elements left and right margins set to auto

Is there a way to have a different width depending on the width of the browser?

For example the browser is:
less than 200px wide use width 175px
between 200px and 400 px use 350px
Above 400px use 525px

I don't know of a way to specify different pixel widths but you could use percentages.

I tried that and unfortunatly it doesn't work like I want with float. I have been able to get it all set up and looking beautiful in all browsers by setting a pixel width on the div everthing is in, but it won't scale from 1 item to 3+ when the screen gets narrower/wider.

Hmm, floating and centering are two different things. How are you going to center a float:left;?
I think we need to see what you're trying to do.

I am trying to center a float:left but only because there isnt a float center. This is what I want the page to do.

Title
-------------------------------------------------------------------

Item 1 Item2 Item3
+-------------+ +-------------+ +-------------+
| | | | | |
+-------------+ +-------------+ +-------------+

Item 4 Item5 Item6
+-------------+ +-------------+ +-------------+
| | | | | |
+-------------+ +-------------+ +-------------+



Title
------------------------------------------------

Item 1 Item2
+-------------+ +-------------+
| | | |
+-------------+ +-------------+

Item 3 Item4
+-------------+ +-------------+
| | | |
+-------------+ +-------------+

Item5 Item6
+-------------+ +-------------+
| | | |
+-------------+ +-------------+






*Phew that was a pain to get looking right*

What are you centering then? The container the floats are in?

I have a <div id="main"> with a bunch of <div class="item"> divs.

Each item div has a table, with two rows.

Row 1 is text, row 2 is a picture linked to another page.