Centering "tables" and columns with css

RedCherry · 2008-12-10, 10:23 AM

Anyone know how to center a "table" of two columns using CSS? When I redesigned theredcherry, all the category pages are tableless and optimized for 1024 resolution. But in the bigger resolutions, it is all crammed to the left.

I used this:

Code:

/* ---  LEFT SIDE BAR --- */
#menu {float: left; padding-left: 10px; padding-right: 10px; text-align: left; width: 200px}

/* ---  MAIN PAGE CONTENT --- */
#content {width: 770px;   float: left;   text-align: left;   margin-left: 5px;   margin-bottom: 0px;   padding-bottom: 0px;   padding-left: 5px;}

I tried putting a big <div align="center"></div> around the whole thing, but that didn't work. When I tried different floats, they overlapped, lol. And % widths also didn't seem to work.

This is the first big project I did almost completely tableless, so I'm still learning.

bDok · 2008-12-10, 11:09 AM

What I'd do is create a container for the two other divs. on that container that holds the two divs you do a margin auto for the left and right sides.

So if your container is XYZ pxs wide... then it will auto adjust the margins on the side so it will be centered.

RedCherry · 2008-12-10, 11:39 AM

Heh that worked, thanks. Now I just have to add the code to all the pages.

MeatPounder · 2008-12-10, 01:14 PM

Hi RedCherry, saw the pm reply but see bDok beat me to it

2008-12-10, 10:23 AM	#1
RedCherry Of all the things I've lost, I miss my mind the most. Join Date: Apr 2004 Location: Middle of the Desert, Pahrump, NV Posts: 3,187	Centering "tables" and columns with css Anyone know how to center a "table" of two columns using CSS? When I redesigned theredcherry, all the category pages are tableless and optimized for 1024 resolution. But in the bigger resolutions, it is all crammed to the left. I used this: Code: /* --- LEFT SIDE BAR --- / #menu {float: left; padding-left: 10px; padding-right: 10px; text-align: left; width: 200px} / --- MAIN PAGE CONTENT --- / #content {width: 770px; float: left; text-align: left; margin-left: 5px; margin-bottom: 0px; padding-bottom: 0px; padding-left: 5px;} I tried putting a big <div align="center"></div> around the whole thing, but that didn't work. When I tried different floats, they overlapped, lol. And % widths also didn't seem to work. This is the first big project I did almost completely tableless, so I'm still learning. __________________ Our 3D Comics and Props on Renderotica Last edited by RedCherry; 2008-12-10 at 10:25 AM..*

2008-12-10, 11:09 AM	#2
bDok bang bang Join Date: Mar 2005 Location: SD/OC/LA Posts: 3,241	What I'd do is create a container for the two other divs. on that container that holds the two divs you do a margin auto for the left and right sides. So if your container is XYZ pxs wide... then it will auto adjust the margins on the side so it will be centered. __________________ submit to Nymphotic submit to Moistlace

2008-12-10, 11:39 AM	#3
RedCherry Of all the things I've lost, I miss my mind the most. Join Date: Apr 2004 Location: Middle of the Desert, Pahrump, NV Posts: 3,187	Heh that worked, thanks. Now I just have to add the code to all the pages. __________________ Our 3D Comics and Props on Renderotica

2008-12-10, 01:14 PM	#4
MeatPounder Women might be able to fake orgasms But men can fake whole relationships Join Date: Oct 2003 Location: Fort Lauderdale, Fl Posts: 2,408	Hi RedCherry, saw the pm reply but see bDok beat me to it