margin auto + float right not working in IE7
I have a problem in HTML, when rendering in IE7.
When combining a "margin:auto" block along with a "float:right" block.This is a sample code for this issue:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<开发者_StackOverflow中文版/head>
<body>
<div id="floating" style="float: right; background-color: #ccf">
This is the top right links block
</div>
<div id="body" style="width: 800px; margin: auto; background-color: #fcc">
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
</div>
</body>
Problem with this code in IE7:
- the margin:auto is not centering the block "body". It looks like the block "floating" is somehow affecting the centering
what I get in IE7:
The correct display will be (div "body" centered):
- the "floating" block is not actually floating over the body, when collapsing
what I get in IE7:
correct display:
Has anyone run into this kind of problem?
Any hint to get this right on IE7? Thank youWrap the two divs in a containing div. Give the wrapper width: 100%; or whatever total width you want. So you code should look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="wrapper" style="width: 100%;">
<div id="body" style="width: 800px; margin: auto; background-color: #fcc">
/*---- Moved element ---- */
<div id="floating" style="float: right; background-color: #ccf">
This is the top right links block
</div>
/*---- End Moved element ---- */
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
</div>
</div>
</body>
</html>
I don't really understand it but you can either wrap it in a div or give the body tag a width of 100% or whatever size you want. it's usually good to give the body tag a width of 100% anyway and hen set a wrapping div to style the width of the box.
加载中,请稍侯......
精彩评论