...

View Full Version : Centering data without using tables



jghake
12-16-2009, 11:28 PM
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?

Excavator
12-17-2009, 12:36 AM
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

jghake
12-17-2009, 10:12 PM
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

Excavator
12-17-2009, 11:52 PM
I don't know of a way to specify different pixel widths but you could use percentages.

jghake
12-17-2009, 11:55 PM
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.

Excavator
12-18-2009, 12:05 AM
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.

jghake
12-18-2009, 12:57 AM
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*

Excavator
12-18-2009, 01:19 AM
What are you centering then? The container the floats are in?

jghake
12-18-2009, 01:25 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum