左栏自适应,右栏居右宽度不变

来源:互联网 发布:mysql 查询最小的数据 编辑:程序博客网 时间:2024/06/05 03:56
左栏设置宽度100%居左,这样就自动适应浏览器的大小。
右栏设定恒定宽度200PX居右,Margin 设定向左减200PX(margin:0 0 0 -200px;,这样就能保证在固定在屏幕的右边。
在IE6 FF里都可以良好的执行,IE6中略有不同。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlnshttp://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<<title>左栏自适应,右栏宽度不变居右</title>
<style>
 body{margin:0 0 0 0; padding:0 0 0 0; color:#FFFFFF;}
 .nav{width:100%; height:150px; background:#00FFFF;}
 .main{float:left; width:100%; height:500px; background:#0099CC;}
 .menu{float:right; margin:0 0 0 -200px; height:500px; width:200px; background:#00CCFF;}
 .content{ margin:5px; background:#CCCCCC; width:700px; height:400px;}
</style>
</head>
<body>
<div class="nav">top</div>
<div class="main"><div class="content">content</div></div>
<div class="menu">right</div>
</body>
</html>
0 0