Hi, My content div moves out to the left in I.E even though it is inside a centered container div. It's fine in all other browsers. Please help?

Here's the site www.sugarrushdesign.com/test

Don't use position:absolute! IE has some very well documented problems with positioning.. and besides, you don't need it anyway. Check our stickies for better centering methods.
The easiest: give your #container a width and then use margin: xx auto; to center. The XX would be for top and bottom margin values.

Hi,
Check with margin and padding of your div and please use debugbar for Ie this is like firebug in firefox it will help you to fix problems in alignment

Thanks Guys. I'm going to recode the site without absolute positioning when the 9 to 5 is over.

Nice graphics but your code is really bad.

Whether it's your own site or the other one...

I would recommend learning HTML/CSS at w3schools.com ...

DreamWeaver is not the "holy grail" for people that want to "code" websites, bloated code (like all those img swap js functions... easier to do it with CSS),...

If your wanting to center a div, use:
margin: auto;

I've used margin auto for the wrapper one of the divs inside the wrapper is moving out to the left. Beyond the edges of the wrapper. However this only happens in internet explorer.

You're right CSM my coding sucks. Thanks for your post.

I've used margin auto for the wrapper one of the divs inside the wrapper is moving out to the left. Beyond the edges of the wrapper. However this only happens in internet explorer.

Soo.. how is that div coded/styled? Got the code?

Here's the code.

html, body {margin: 0; padding: 0;
background-image:url(../images/ornate.jpg);
background-repeat: repeat;
text-align:centre;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

.hidden {
display: none;
}

p {
color:#888888;
text-align:left;
}



#wrapper {
background-image:url(../images/wuwulogo.jpg);
background-position:center top;
background-repeat:no-repeat;
background-color:black;
width: 821px;
min-height:1000px;
height:auto;
margin-left:auto;
margin-right:auto;
margin-bottom:0;
border:0;

}




#nav {
height: 39px;
width: 579px;
background-color:black;
padding: none;
border:0;
margin-left:auto;
margin-right:auto;
position:absolute; top:330px; left:117px; right:123px;
text-align:center;

}

#content {
display:inline;
background-color:black;
height:600px;
width: 579px;
padding: none;
margin-left:auto;
margin-right:auto;
margin-top:0;
margin-bottom:0;
position:absolute; top:370px; left:117px; right:122px;
background-image:url(../images/footer.jpg);
background-position:bottom center;
background-repeat:no-repeat;
text-align:center;



}

Your problem on #content is still that position:absolute. Is there any particular reason for it? Most of the time you just don't need it.

If U want to center DIV, U should use margin: 0 auto; , and i think that min-height IE Fix is (i'm using it for ages):

min-height: 1000px;
height: auto !important;
height:1000px;

You should NEVER use that !important hack and it IS a hack - used by people who don't understand css specificity.. and that code is just not a good solution.

Are U really sure that using it is wrong ? I found It here: http://www.dustindiaz.com/min-height-fast-hack/
and read more here: http://www.webmasterworld.com/css/3128123.htm

it doesn't seem like a bad idea to use it?

The point is, you should not be HACKING at all! If you need to target IE, then use conditional comments that call an "iefixes' css file that contains ONLY those rules needed to make IE display correctly.

By including hacks in your main CSS, you are just ASKING for future versions of IE to be broken!

OK, Thx for this advice!

body {
text-align:center;
}

And set the DIV(s) to 'text-align: left;'

Should help. Hope it does.

That's not necessary, the margin: 0 auto; works just fine for all browsers.

I'm pretty sure margin: 0 auto; doesn't work with some versions of IE.

Yes, margin: 0 auto; works in all versions of IE, even the demon spawn IE6.

tim