set page to center; margin on left too big

[mistersmith]

hi,

 

i set my page to center using the 'margin:auto, o command along with text center', and it does. unfortunately, the margin on the left is extremely wide compared to the right. when you shrink the window, the page shrinks, but it takes a while before the left margin starts shrinking. (hopefully i am explaining this correctly.)

 

can't do anything about it however since it's set to auto. any suggestions?

 

/*
CSS for April site
*/

html {
margin:-10px;
padding: 0px;
height: 1000px;
width: 700px;
margin-left: auto;
margin-right: auto;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin-left: auto;
margin-right: auto;
text-align: center;
}
a {
 font-weight: light;
 color: black;
 text-decoration: none;
}

a:link {
 text-decoration: none;
}

a:visited {
 color: black;
 text-decoration: none;
}

a:hover {
 text-decoration: none;
 color: #ec008c;
}

a: active {
 text-decoration: none;
 color: #ec008c;
}

li {
list-style-type: none;
}
#bodycontent {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 25px;
font-weight:normal;
width: 1000px;
clear: left;
padding-top: 34px;
text-align:left;
}
div#navigation {
height: 30px;
width: 400px;
margin: 0 0 0 105;
padding: 75px 0 0 20px;
float: right;
}
div#navigation li{
display: inline;
float: right;
margin: 0 5px 0 25px;
width: 75px
text-align; left;
}
div#header img{
float:left;
width: 250px;
display: block;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight:bold;
padding: 18px;
}
div#links {
width: 150px;
float: left;
}

div#links li{
margin: 0 0 0 -23px;
}
a img {
border-style: none;
display: block;
}
div#contactheader {
float:left;
}
div#contact {
padding: 30px 0 0 210px;
}
div#contact li {
display:inline;
float:left;
padding: 0 3px 0 0;
text-align: left;
}
div#email {
margin: 30 50 50 509;
padding: -20 0 0 550;
}
#wrap {
width:850px;
margin:0 auto;
background:#999;
overflow:hidden;
}
#left {
float:left;
width:50%;
background:#999;
text-align:justify;
padding: 0 20px 0 0;
}
#right {
float:left;
width:50%;
background:#777;
text-align:justify;
vertical-align: top;
}
div#hs {
width:150px;
}
div#gallery {
width:500px;
margin: -275px 0 0 175px;
}

[newseed]

Get rid of all the margins you've posted and add this to your CSS:

 

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

 

 

You HTML will be something like this:

 

 

---all your other html/content goes here---

 

 

Of course you can adjust the CSS for the #wrap to reflect the width you desire.

[Wickham]

Newseed's suggestion is the normal cure, but you have this:-

html {

margin:-10px;

padding: 0px;

height: 1000px;

width: 700px;

margin-left: auto;

margin-right: auto;

}

 

which attempts to give a width and auto margins to the html which is not a div, it's the whole page. I've never done that and I don't think it's correct. Use a wrap div and then check whether any of the divs inside have a side margin within it (which is why Newseed said delete them).

 

Edit: try changing html to #wrap in the CSS above

#wrap {

/*margin:-10px;*/

padding: 0px;

height: 1000px;

width: 700px;

margin-left: auto;

margin-right: auto;

}

 

and putting in the wrap div around the markup as Newseed suggested

Edited January 30, 2009 by Wickham