CSS溢出问题，div不包含内容

Question

http://i.stack.imgur.com/aDBuK.png http://i.stack.imgur.com/mPbuX.png

如何让#cols包含＃botcol的整个区域。我意识到这是非常基本的，但我已经挣扎了一段时间，感谢您的帮助。

HTML：

<div id="content">
        <img id="worldmap" src="worldmap.png"/>
        <div id="cols">
            <div id="topcol">
                ...
            </div>
            <div id="botcol">
                <div id="infopanel">
                    ...
                </div>
            </div>

CSS：

div#container{
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    height:100%;
    position: relative;
    border: grey solid 1px;
}
#cols {
    z-index:1;
    position: absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    overflow:auto;
}
#topcol {
    width:100%;
    overflow:auto;
}
#botcol {
    height:100%;
    width:100%;
}
div#content{
    position:relative;
}