对于sider元素的使用

[Funny423]

图中的上中下三个部分分开了，边也没有和上下连起来 哭 怎么合成一体的？
代码：
<sider>
<h2><span></span><a href="#" style="font-size: 18px;">窗内官方群</a></h2>
<ul>
<li style="background: url(%E7%B2%89%E8%93%9D%E8%83%8C%E6%99%AF.jpg) no-repeatleft 50%;">  窗口网一群：33925615</li>
<li style="background: url(%E7%B2%89%E8%93%9D%E8%83%8C%E6%99%AF.jpg) no-repeat left 50%;">  窗口网二群：33925615</li>
<li style="background: url(%E7%B2%89%E8%93%9D%E8%83%8C%E6%99%AF.jpg) no-repeat left 50%;">  窗口网三群：33925615</li>
<li style="background: url(%E7%B2%89%E8%93%9D%E8%83%8C%E6%99%AF.jpg) no-repeat left 50%;">  窗口网四群：33925615</li>
</ul>
<span class="sider_b"></span>
</sider>


样式：
sider{float:right;
width: 300px;
}
sider h2{background: url(%E5%92%96%E5%95%A1.jpg) no-repeat 50%;float: left;width: 230px;line-height: 30px;height: 30px;}
sider h2 a{padding-left: 12px;
margin-left: 9px;
color: #000;
text-decoration: none;
}
sider ul{
border-right: #b9c3d0 1px solid;
padding-right: 0px;
border-top: #b9c3d0 0px solid;
padding-left: 0;
float: left;
padding-bottom: 0px;
border-left: #b9c3d0 1px solid;
width:228px;
padding-top:0px;
border-bottom: #b9c3d0 0px solid;
}
sider li{
padding-right: #0px;
padding-left: 12px;
float: left;
padding-bottom: 1px;
overflow: hidden;
padding-top: 1px;
width-space:nowrap;
background: url(%E4%B8%87%E5%9C%A3%E8%8A%82.jpg) no-repeat left 50%;
margin-left: 3px;
width: 202px;
}
sider .sider_b{
background: url(%E6%A9%99%E8%89%B2.jpg) no-repeat 50%;float: left;width: 230px;height: 15px;
}