Log in

View Full Version : Resolved Trying to center my tables/divs?


ModernRevolutions
12-20-2010, 07:44 PM
Okay my website is here (http://www.modernrevolutions.vivid-avenue.net) 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
<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 (http://modernrevolutions.vivid-avenue.net/1680x1050.jpg) is what it looks like on mine. And here (http://browsershots.org/http://modernrevolutions.vivid-avenue.net/#) 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;


<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>
<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%.
ModernRevolutions
12-20-2010, 10:46 PM
I do want it like that, but its coming out weird. See? (http://modernrevolutions.vivid-avenue.net/). If it looks normal for you, then look at my screenshot of what I see (http://modernrevolutions.vivid-avenue.net/gahhh.jpg).
Nile
12-20-2010, 10:50 PM
Give body margin:0;
ModernRevolutions
12-20-2010, 10:56 PM
It shifted it back so its in alignment with the background image, but its still to the left :/
Nile
12-20-2010, 10:58 PM
Screen shot?
ModernRevolutions
12-20-2010, 11:00 PM
http://modernrevolutions.vivid-avenue.net/screenshot2.jpg
Nile
12-20-2010, 11:02 PM
Give #header text-align:center;
ModernRevolutions
12-20-2010, 11:05 PM
YES!!!! Thank you SO MUCH! Its perfect for me. Time to try browsershots!

I don't suppose you could help me with one last div question?
Nile
12-20-2010, 11:06 PM
No problem, I'm glad to help :D

Here on DD, we like to keep things organized. In an effort to do so, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
1. Go to your first post
2. Edit your first post
3. Click "Go Advanced"
4. In the dropdown next to the title, select "RESOLVED"