Help Centering Website

pinkmonkey

09-14-2011, 11:40 AM

HI,

I would appreciate any help anyone can offer me. I would like to centre the template I have for my site, currently it is based on the left.

I have tried to add a wrapper:

#wrap {
width: 900px;
margin: 0 auto;
}

But it doesnt work. The body code looks like this:

body{
background:url(.....) repeat-y top left #121212;
font:11px Arial, Helvetica, sans-serif normal;
text-align:left;
padding:0;

#header{
background:url(...) no-repeat top left #121212;
position:absolute;
top:0;left:0;
height:144px;
width:800px;

#main{
position:absolute;
top:170px;left:0;
width:600px;
color:#000

#sidebar{
position:absolute;
top:144px;left:700px;
width:200px;
color:#FFF;

they are all absolute, should they be auto with a wrapper?

Thanks for your help in advance

alykins

09-14-2011, 02:15 PM

get rid of all "position:....." attributes. completely.
Then add the wrapper to the html (and show the html so we can see how you have it "layed out")... it should look something like this

<div id="wrap">
<div id="header"><div>
<div id="main"></div>
<div id="sidebar"></div>
</div>

now if you are doing what I think you are doing you will need to add

float:left;

to both #main and #sidebar and also will need to flip the order of them in the above "layout"
so...

<div id="wrap">
<div id="header"><div>
<div id="sidebar"></div>
<div id="main"></div>
</div>

Anakratis

09-14-2011, 06:22 PM

I was dealing with the same problem too ;)

Try this. Remove all the stuff you have related to horizontally centering the Div.

CSS:

<style type="text/css">
.center
{
margin:auto;
width:200px;
}
</style>

You can set the "width" property to whatever you'd like in number of pixels.

BODY:

<body>
<div class=".center">
---BODY CONTENT GOES HERE---
</div>
</body>

pinkmonkey

09-14-2011, 07:49 PM

Thank you for your help, here is the amended html now with the "menu" and "main" swapped.

<body>
<div id="wrap">

<div id="header">

<div class="menu"> ...

</div>
</div>

<div id="sidebar">

<h3>MONKEY LINKS</h3>
...

</div>

<div id="main">

....

<div style="clear:both"></div>

.....
</div>

</div>

</body>
</html>

Thanks again for your help