想在页面布局3个层，黑色top-div置顶居中固定宽度900px，下面放置红色left-div与其左对齐，放置蓝色right-div与其右对齐。
红色left-div固定宽度300px固定高度400px。
蓝色right-div左紧邻红色left-div，右对齐黑色top-div，高度要能自适应屏幕的高度！！
在蓝色right-div中嵌入一个黄色iframe，大小要能充满蓝色right-div！！
以下为代码，哪位好心人帮帮忙，修改一下代码啦！！弄三天了没弄出来，好郁闷噢！！呜呜呜~~~
注：我现在用了一个container-div，把top-div、left-div、right-div装在里面，然后在body, html中设置text-align居中，以实现这4个层在屏幕上左右居中。现在就是无法让right-div和iframe的高度自适应屏幕，拜托各位前辈大虾啦！！
HTML code
<html>
<head>
<title>四个div</title>
<style>
<!--
body, html{
margin:0px;
padding:0px;
text-align:center;/*使得层居中*/
}
#container-div{ /*把top-div、left-div、right-div装在里面*/
position: relative;
margin: 0 auto;
padding:0px;
width:900px;/*层宽度固定为900px*/
text-align: left;
}
#top-div{
margin:0px;
padding:0px;
background-color: #000000;/*黑色*/
height: 100px;
}
#left-div{
float:left;
width:300px;/*层宽度固定为300px*/
padding-top:20px;
padding-bottom:30px;
margin:0px;
height: 400px;/*层高度固定为400px*/
background-color: #FF0000;/*红色*/
}
#right-div{
float:right;
width:600px;
margin:0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 30px;
padding-left: 0px;
background-color: #0000FF;/*蓝色*/
}
-->
</style>
</head>
<body>
<div id="container-div">
<div id="top-div"></div>
<div id="left-div"></div>
<div id="right-div"><iframe width=100% height=100% name=myiframe frameborder=3 src="xyz.html" scrolling="auto"></iframe>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>四个div</title>
<style>
html
{
height: 100%;
margin: 0px;
padding: 0px;
text-align: center;
}
body
{
float: left;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
text-align: center;
}
#container-div
{
/*把top-div、left-div、right-div装在里面*/
position: relative;
margin: 0 auto;
padding: 0px;
width: 900px; /*层宽度固定为900px*/
text-align: left;
height: 100%;
}
#top-div
{
margin: 0px;
padding: 0px;
background-color: #000000; /*黑色*/
height: 100px;
}
#left-div
{
float: left;
width: 300px; /*层宽度固定为300px*/
padding-top: 20px;
padding-bottom: 30px;
margin: 0px;
height: 400px; /*层高度固定为400px*/
background-color: #FF0000; /*红色*/
}
#right-div
{
float: right;
width: 600px;
margin: 0px;
background-color: #0000FF; /*蓝色*/
height: 100%;
}
</style>
</head>
<body>
<div id="container-div">
<div id="top-div">
</div>
<div id="left-div">
</div>
<div id="right-div">
<iframe style="width: 100%; height: 100%; margin: 5px;"
name="myiframe" frameborder="3" src="xyz.html"></iframe>
</div>
</div>
</body>
</html>