保持相对位置的方法还是很简单的。position:relative即可。如果要设定特定位置可以使用left、top等属性设置。
<!-- Html布局：--><div class="panel1">
<div class="inside show">
<p>规则<br />
1.点击【开始】......<br />
2.请在输入框.....<br />
3.这是系统......
</p>
</div>
</div>
<div class="panel2">
<p>请点击【开始】按钮开始游戏：<input type="button" value="开始" class="start" /></p>
<p>请在输入框输入您的估计价格：<input type="text" /><input type="button" value="确定" /></p>
</div> /* CSS代码 */
.panel1{
float:left
width:100% /* 或者一个实际的像素，如1000px */
height:100px /* 实际高度，不要auto */
overflow:hidden /* 可选 */
}
.panel1 .inside{overflow:hidden}
.panel2{
float:left
text-align:right
}
.show{display:block}
.hide{display:none} /* 不清楚你是否使用jquery或者其他js库或者纯javascript，这里提供jquery方法 */
$(document).ready(function(e){
$('.start').click(function(){
$('.panel1 .inside').addClass('hide')
})
})
不清楚欢迎追问。
把div的宽度固定死，就可以了，不过一般不会那么做，电脑的分辨率不同，宽度固定死了，浏览效果不好<div align="center" style="width:100%min-width:1300pxheight:800pxbackground:#999padding-top:100px">
<div style="width:1000pxheight:300pxbackground:#fff"></div>
</div>
这里写了个min-width，就不解释原因了
