CSS Forum

**plg007** · 12-07-2009, 05:20 PM

Hi everyone,

In Firefox, Safari PC or Mac, the entire site is centered perfect.
On IE, i have a div (on the right) wich is more on the right then should be.
So, please what’s wrong in my code:

body {

background-color: #efefef;
font: .8em/1.3em verdana,arial,helvetica,sans-serif;
margin: 0px;
padding:0px;
}

.center
{

font: .8em/1.3em verdana,arial,helvetica,sans-serif;
}

#page {
width: 1100px;
position: relative;
margin: 0 auto 0 auto; /*asta face aliniamentul la mijloc*/
padding: 10px 0px 0px 0px;
}

#header {
background-color: #dddddd;
width: 1100px;
height: 100px;
margin: 0px;
}

#sidemenu {
position: absolute;
background-color: #eeeeee;
width: 200px;
height: 480px;
left:0px;
}
#center {

background-color: #dddddd;
font: .8em/1.3em verdana,arial,helvetica,sans-serif;
margin: 0px 0px 0px 200px;
width: 500px;
height: 550px;
padding: 10;
}

#center2 {

background-color: #dddddd;
font: .8em/1.3em verdana,arial,helvetica,sans-serif;
margin: 0px 0px 0px 200px;
width: 790px;
height: 550px;
padding: 10;
}

#centeright {

background-color: #dddddd;
position: absolute;
margin: 0px 0px 0px 720px;
width: 262px;
height: 550px;
padding: 10;
}

#right {

position: absolute;
background-color: #eeeeee;
margin: 0px 0px 0px 1000px;
width: 100px;
height: 570px;

}

#right2 {

position: absolute;
background-color: #eeeeee;
margin: 0px 0px 0px 1000px;
width: 100px;
height: 550px;
float: left;

}

#footer {

background-color: #dddddd;
width: 1100px;
height: 70px;
font-size: 11.7px;

}

A {
color: #000000;
text-decoration: none;
}

A:hover {
color: #df7328;
text-decoration: none;
}

#flashcontent {
margin: 0px 0px 0px 200px;
width: 800px;
height: 550px;
}

#flashcontent2 {
background-color: #dddddd;
font: .8em/1.3em verdana,arial,helvetica,sans-serif;
margin: 0px 0px 0px 200px;
width: 780px;
height: 200;
padding: 10;
}

#container {

background-color: #dddddd;
font: .8em/1.3em verdana,arial,helvetica,sans-serif;
margin: 0px 0px 0px 200px;
width: 780px;
height: 300;
padding: 10;
}

#right is the problem.

Please an advice.

I don’t know if i can put a link here, so the admin can erase if this is wrong.

link to my site

**vangogh** · 12-07-2009, 07:50 PM

It's hard to know without seeing your html, but it looks like you're trying to use positioning to center things. The easiest way to center your page horizontally is to wrap the page in a div and then give that div a width and a left and right margin of auto.

It might look something like:

HTML Code:

<body>
<div id="wrapper">
all your code for the page here
</div>
</body>

Code:

#wrapper {width:980px; margin:0 auto}

The 980px is arbitrary, but you would need to specify some width. You'll also need to use a proper doctype of older versions of IE will get thrown off.

I wrote a post awhile back on centering with css that basically gives more details to what I just typed above.