Hi, basicaly I have the following HTML/CSS Layout
HTML:
<div id="container">
<div id="main">
<h1>TEST</h1>
</div>
</div>
CSS:
#cont {
width: 100%;
background: #ddd;
}
#main {
width: 900px;
background: #fff;
margin-left: auto;
margin-right: auto;
}
This works fine in FF, safari, Chrome and Opera but IE8 still aligns the "main" div to the left.
Does anyone know what the problem might be? Thanks in advance.
did you define a doc type?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Futhermore get rid of the width: 100% on the first div and body must have padding: 0 and margin: 0
IE needs a correct DOC Type!
I always use
#main{
margin:0 auto;
}
and the width:100% is not necessary.
replace 0 for top and bottom margins or
#main{
margin:30px auto 0;
}
for just top-margin
You just need to change either the css #cont to #container or the id of the div to cont.
Works fine for me in IE8. http://jsfiddle.net/5M6X9/