如果我们要实现如下效果，当右侧的内容比较少时，右侧的背景色也一定要与左侧内容保持同一高度。
我们可以这样做：
首先看一下HTML基本结构,主要有内容区content、右侧区side和右侧底部圆角区。这三块由一个大的div(page)包住。
<body>
<div id=”page” class=”clearfix”>
<div id=”content”></div>
<div id=”side”></div>
<div class=”bt_bg”></div>
</div>
</body>
其次看一下CSS样式渲染：
1、在page这个div里实现右侧的背景按Y轴重复平铺，并且针对右侧底部圆角区做相对定位。
#page{
width:980px;
margin:20px auto;
background:url(img/list_rightbg.png) repeat-y right 12px;
position:relative;
}
list_rightbg.png图片切图如：
2、内容区content实现固定宽度向左浮动。
#content{
border:#ddd 1px solid;
width:682px;
float:left;
background-color:#fff;
padding:20px;
}
3、右侧区side固定宽度向右浮动，并且设置顶部圆角背景不重复。
#side{
width:208px;
float:right;
padding:20px;
background:url(img/list_bg.gif) no-repeat -248px 0px;
}
img/list_bg.gif背景图切图如下：
4、最后实现右侧区底部圆角背景不重复，做一个绝对定位于整个page的右下角。
.bt_bg{
width:248px;
height:13px;
position:absolute;
bottom:0;
right:0;
background:url(img/list_bg.gif) no-repeat 0 -12px;
}
这时，页面在IE下显示是正常的，而在FireFox下却是这样的：
想要解决FireFox浏览器的这个问题，只要在ID为page的这个DIV里增加一个class=”clearfix”即可。
class的样式为：
.clearfix:after{
clear: both;
content: “.”;
display: block;
height: 0;
visibility: hidden;
}
最后修饰一下body的样式：
body{
padding:0;
margin:0;
background-color:#DFDFDF;
color:#666;
font-size:12px;
line-height:220%;
}