Trying to center my tables/divs?

**ModernRevolutions** · 12-20-2010, 07:44 PM

Okay my website is here and I am trying to center the whole thing. Like The image, in the center, which I seem to have done just by making the width of the div table 100% and then just using

Code:

<center> </center>

around the imagemap in the div. However, when I tried to do that with the #sidebardiv and #contentdiv I changed the "left" value to percentages. But it seems it works on my screen however when I use browser shots its not like that on all screens. Here is what it looks like on mine. And here is the browser shots page.

Overall: I would like my whole page (except the text) to be in the center of every screen. Can someone please help?

**Nile** · 12-20-2010, 07:50 PM

<center> is depreciated, use text-align: center in replace. Of course, <center> and text-align only align text, not a block element. To center something horizontally, use margin:0 auto;

Code:

<div style="margin:0 auto; width: 50px; height: 50px; background: green">
  I should be in the top center of your page!
</div>

**ModernRevolutions** · 12-20-2010, 09:08 PM

That centers them but I want both my side bar and content bar/boxes in the middle (but not overlapping). I want them about 75-100px away from each other. And as for my image, when I put text-align: center, it centers it but also shifts it down a few pixels for some reason :/

**Nile** · 12-20-2010, 09:09 PM

You want it to look like this: http://modernrevolutions.vivid-avenue.net/1680x1050.jpg, right? Just double checking.

**ModernRevolutions** · 12-20-2010, 09:11 PM

Yup, want it to look like that and have the top image, and the 2 tables to center no matter the screen resolution so the website is more compatible

**Nile** · 12-20-2010, 09:20 PM

What I suggest:

Get rid of the position: absolute; muddy slush
Put the sidebar and content div in a container div called something like #content-wrap
Give #content-wrap margin: 0 auto;
Give the sidebar float:left;

**ModernRevolutions** · 12-20-2010, 09:28 PM

I did that and now they aren't centered, they are smushed up to the top left. God i hate divs D: If i knew another way that was just as easy I would use that

**Nile** · 12-20-2010, 10:10 PM

Alright, I suggest starting with a neat little template like this:

HTML Code:

<html>
	<head>
		<title>Layout</title>
		<style type="text/css">
		body 		{ color: #000; font-family: arial; font-size: 12px; margin: 0; padding: 0; }
		div 		{ margin: 0; padding: 0; }
		#page-wrap	{ width: 100%; }
		#header 	{ background-color: #ccc; height: 100px; width: 100%; }
		#body-wrap 	{ width: 95%; margin: 25px auto; }
		#sidebar 	{ background-color: #ccc; float: left; height: 200px; width: 19%; }
		#content 	{ background-color: #ccc; float: left; height: 300px; width: 79%; margin-left: 2%; }
		</style>
	</head>
	<body>
		<div id="page-wrap">
			<div id="header">Header</div>
			<div id="body-wrap">
				<div id="sidebar">
				&nbsp;
				</div>
				<div id="content">
				&nbsp;
				</div>
			</div>
		</div>
	</body>
</html>

And build on that, maintaining the neatness of the code.

**ModernRevolutions** · 12-20-2010, 10:33 PM

Okay that is basically working. WOOT! But now my header wont center >.< http://modernrevolutions.vivid-avenue.net/index3.php Here is the live version that I have edited and all that jazz

**Nile** · 12-20-2010, 10:35 PM

I thought you wanted: http://modernrevolutions.vivid-avenue.net/1680x1050.jpg
The header is 100%.

Thread: Trying to center my tables/divs?

Thread Tools

Search Thread

Trying to center my tables/divs?

Bookmarks

Bookmarks

Posting Permissions