我相信您的问题与以下事实有关，即 inside-left 和 inside-right 都是包含 div 中的浮动元素.如果您将以下内容添加到样式表中:
#inside-bottom{清除:两者；}
然后在您的内部右侧 div 定义下方添加以下内容:
<div id="inside-bottom"></div>
你会得到更好的结果.
Currently, I have a code like this
<!DOCTYPE HTML PUBLIC "-// W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
background:#000;
}
#header{
float:right;
width:800px;
}
#topbar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30px;
}
#container-box{
margin:0px auto;
border:1px solid black;
width:950px;
margin-top:40px;
height:550px;
}
#image-box{
border:3px solid Black;
position:absolute;
float:left;
width:120px;
height:120px;
z-index:1000;
background:#000099;
}
#inside-box{
z-index:-100;
margin:0px auto;
border:1px solid #737373;
width:900px;
margin-top:50px;
height:100%;
}
#inside-left{
float:left;
border-right:1px solid #737373;
width:250px;
height:100%;
text-align:bottom;
}
#inside-right{
float:right;
width:649px;
color:#FFFFFF;
}
#right-top{
float:left;
width:649px;
height:375px;
border-bottom:1px solid #737373;
}
#right-btm{
float:left;
padding-top:5px;
width:649px;
height:150px;
}
#footer{
color:#c3c3c3;
}
#footer #footer_left{
float:left;
width:200px;
font-size:9px;
margin-top:5px;
margin-left:30px;
text-align:left;
}
#footer #footer_right{
float:right;
width:500px;
font-size:14px;
margin-right:30px;
margin-top:5px;
text-align:right;
}
#footer #footer_right .linkage{
float:right;
margin-right:20px;
}
#footer #footer_right .linkage a{
color:#c3c3c3;
text-decoration:none;
}
</style>
</head>
<div id="header">
<div id="topbar"></div>
</div>
<div id="container-box">
<div id="image-box"></div>
<div id="inside-box">
<div id="inside-left">
<table width="100%" cellspacing="15px" height="100%">
<tbody><tr valign="bottom">
<td>
<div class="elements"></div>
<div class="elements"></div>
</td>
</tr>
</tbody></table>
</div>
<div id="inside-right">The inner German border was the frontier between the German Democratic Republic (East Germany) and the Federal Republic of Germany (West Germany) from 1949 to 1990. Not including the similar but physically separate Berlin Wall, the border was 1,381 kilometres (858 mi) long and ran from the Baltic Sea to Czechoslovakia. It was formally established on 1 July 1945 as the boundary between the Western and Soviet occupation zones of Germany. On the Eastern side, it was made one of the world's most heavily fortified frontiers, defined by a continuous line of high metal fences and walls, barbed wire, alarms, trenches, watchtowers, automatic booby-traps and minefields. The border was a physical manifestation of Winston Churchill's metaphor of an Iron Curtain separating the Soviet and Western blocs during the Cold War. Built by East Germany in phases from 1952 to the late 1980s, the fortifications were constructed to stop the large-scale emigration of East German citizens to the West. It caused widespread economic and social disruption on both sides. On 9 November 1989, the East German government announced the opening of the Berlin Wall and the inner German border. The inner German border was not completely abandoned until 1 July 1990, exactly 45 years to the day since its establishment, and only three months before German reunification formally ended Germany's division. Little remains today of the inner German border's fortifications. The inner German border was the frontier between the German Democratic Republic (East Germany) and the Federal Republic of Germany (West Germany) from 1949 to 1990. Not including the similar but physically separate Berlin Wall, the border was 1,381 kilometres (858 mi) long and ran from the Baltic Sea to Czechoslovakia. It was formally established on 1 July 1945 as the boundary between the Western and Soviet occupation zones of Germany. On the Eastern side, it was made one of the world's most heavily fortified frontiers, defined by a continuous line of high metal fences and walls, barbed wire, alarms, trenches, watchtowers, automatic booby-traps and minefields. The border was a physical manifestation of Winston Churchill's metaphor of an Iron Curtain separating the Soviet and Western blocs during the Cold War. Built by East Germany in phases from 1952 to the late 1980s, the fortifications were constructed to stop the large-scale emigration of East German citizens to the West..</div>
</div>
</div>
</body>
</html>
The output is like this.
Currently, content is inside the box because it's not reach yet. But when content is exceed the height. It is going to be like this. Because i set the fixed height.
I believe your problem has to do with the fact that both inside-left and inside-right are floating elements within the containing div. If you add the following to your style sheet:
#inside-bottom{
clear:both;
}
And then add the following just below your inside-right div definition: