最近在自学CSS和HTML，遇到了一个错位的问题
原本的效果是这样：MAIN在整个页面中居中，然后图片与文字都在MAIN里居中。NAV贴着MAIN。
因为图片比较长，想加个滚动栏，给MIAN加了OVERFLOW之后，就错位了，MIAN没有居中像右偏移了。
CSS代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style type="text/css">
content{
width:1024px;
height:475px;
background:#FFF;
margin:0 auto;
margin-top:180px;}
nav{
width:150px;
height:200px;
background:#FFF;
display:block;
float:left; }
nav ul{
list-style:none;
margin-right:10px;
margin-top:-2px;}
nav ul li{
line-height:20px;
text-align:right;
font-size:10px;
font-weight:bold;}
main {
width:711px;
height:475px;
overflow:auto;
margin:0 auto;
border-style:dashed;
border-width:1px;
border-color:#000;
position:relative;
float:left;
}
main p{
font-size:12px;
text-align:left;
line-height:22px;
padding:60px 133px 5px;
}
main img{
padding:5px 105px;
}
qrcode{
width:50px;
height:50px;
background-image:url(images/qrcode.jpg);
background-position:center right;
background-repeat:no-repeat;
margin-left:100px;
margin-top:-86px;}
logo{
width:100px;
height:37px;
background-image:url(images/logo1.png);
background-position:center right;
background-repeat:no-repeat;
margin-left:52px;
}
</style>
</head>
<body>
<div id="content">
<div id="nav">
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>WORKS</li>
<li>CONTACT</li>
<li>JOBS</li>
</ul></div>
<div id="main">
<P>我是文字</P>
<img src="images/studio.jpg"/>
</div>
<div id="qrcode"></div>
<div id="logo"></div></div>
</body>
</html>
希望能够帮我指出哪里有问题，谢谢。
已解决，原来是main要加上FLOAT:LEFT,之后清除浮动就OK了。
nav
应该是nav的float和main的overflow之间有冲突，具体我也没太搞清楚。还是放弃用浮动吧，用定位来解决吧。
可以参考这个http://www.phpddt.com/dhtml/787.html
建议把代码全贴出来，这样没弄懂错成什么样了。NAV在左边 float: left; main在右边也加个float: left;应该就正常了，overflow: auto; 是干吗用的？如果有浮动可以写成 overflow: hidden;你试试。