PDA

View Full Version : auto margin difference



Nehm4
Dec 23rd, 2008, 04:30 AM
Hello!

I have an odd problem with centering with margin:0px auto; in IE and Firefox.
In IE a child object is centered in between it's previous sibling and the right side of it's parent. In Firefox, it's centered in between both sides of it's parent.

EX:

<!DOCTYPE HTML!>
<html>
<body>

<style>
div {
height: 100px;
width: 100px;
background: gray;
}
.one {
float: left;
}
.two {
margin-left: auto;
margin-right: auto;
}
</style>

<div class="one">asdf</div>
<div class="two">asdf</div>

</body>
</html>

If you try this out in IE and Firefox, you'll notice that .two is not centered the same.

Does anybody else know of a workaround besides putting .two in a parent div?

Thanks,

-Josh

Excavator
Dec 23rd, 2008, 04:56 AM
Hello Nehm4,
To start with you need to put that in proper order. Your attached CSS belongs in style tags inside the head of the document. You need a complete DocType...
The validator finds all these errors - see the links about validation in my sig below.

Try this instead -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div {
height: 100px;
width: 100px;
background: #ccc;
}
.one {
float: left;
}
.two {
margin: 0 auto;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
</body>
</html>