div自适应浏览器

页面由5部分组成，运行代码后即可看清。现在用的浏览器为IE9，当改变浏览器尺寸后，div#left以及#right部分会明显被挤到屏幕右侧，我希望
1.#left的左端可以始终和#head以及#footer左端对齐
2.#left宽度+#right宽度正好等于#head宽度也就是#right右端正好和#head右端对齐
3.能兼容FF浏览器。目前在FF浏览器下测试，#left和#right整个偏离预定位置。
代码如下：<head>
<style type="text/css">
#head{
height:130px;
width:1000px;
margin-top:20px;
padding:15px;
background-color:#eeeeee;
border:solid 1px #c3c3c3
}
#login{
height:50px;
width:1000px;
padding:15px;
background-color:#eeeeee;
border:solid 1px #c3c3c3
}
#left{
height:600px;
width:250px;
padding:15px;
margin-left:163px;
background-color:#eeeeee;
border:solid 1px #c3c3c3
}
#right{
height:600px;
width:750px;
padding:10px;
margin-top:-600px;
margin-left:413px;
background-color:#eeeeee;
border:solid 1px #c3c3c3
}
#footer{
height:130px;
width:1000px;
padding:15px;
background-color:#eeeeee;
border:solid 1px #c3c3c3
}
</style></head>
<body>
<form name="form2" method="post" action ="login_check.php">
<center>
<div id="head">这里是head部分</div>
</center>
<center>
<div id="login">
<div id="login1">
用户名:<input type="text" id="user" name="user"/>
密码:<input type="password" id="pass" name="pass"/>
<input type="submit" id="abv" value="登录"/>
</div>
</div>
</center><div id="left">
</div>
<div id="right">
</div></body>
<center>
<div id="footer">
footer
</div>
<center>
</form>我的CSS实在很烂，希望大家能给出解决的方法，

解决方案 »

  1.   

    <!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>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>00000</title>
        <style type="text/css">
            body{text-align: center;}
            #out_div{ width:1000px; margin:0 auto;}
            #head{
                height:130px;
                margin-top:20px;
                padding:15px;
            }
            #head,#login,#left,#right,#footer{
                background-color:#eeeeee;
                border:solid 1px #c3c3c3
            }
            #login{
                height:50px;
                padding:15px;
            }
            #left{
                height:600px;
                float: left;
                width:250px;
            }
            #right{
                height:600px;
                float: right;
                width:740px;
            }
            #footer{
                height:130px;clear: both;
                margin-top:15px
            }
        </style>
    </head>
    <body>
    <div id="out_div">
            <div id="head">这里是head部分</div>
            <div id="login">
                <form name="form2" method="post" action="login_check.php">
                    用户名:<input type="text" id="user" name="user"/>
                    密码:<input type="password" id="pass" name="pass"/>
                    <input type="submit" id="abv" value="登录"/>
                </form>
            </div>
        <div id="left">   </div>
        <div id="right">   </div>
        <div id="footer"> footer </div>
    </div>
    </body>
    </html> 
      

  2.   

    你的HTML看起来比较乱，用了不适合使用的<center>标签。
    1楼改得很漂亮，赞一个！