问为什么我的内容会从div中溢出？

EN

<div id="container">
    <div id="fixedImg"></div>
        <div id="content" class="clearfix">
    asdf <br />    asdf <br />
    df<br />asdf <br />    asdf <br />
    df<br />asdf <br />    asdf <br />
    df<br />asdf <br />    asdf <br />
    df<br />asdf <br />    asdf <br />
    df<br />asdf <br />    asdf <br />
    df<br />asdf <br />    asdf <br />
    df<br />asdf <br />    asdf <br />
    df<br />asdf <br />    asdf <br />
    df<br />asdf <br />    asdf <br />
    df<br />asdf <br />    asdf <br />
    df<br />asdf <br />    asdf <br />
    df<br />asdf <br />    asdf <br />

    </div>
</div>

#container {
    width: 990px;
    margin-right: auto;
    margin-left: auto;
    padding-top:14px;

}
#fixedImg {
    float: left;
    width: 300px;
    background-image: url(../images/pageBg.jpg);
    background-repeat: repeat-y;
}
#content {
    float: left;
    width: 690px;
    border-bottom: solid #000 1px;
    background-color:#CC0000;
    overflow:auto;
}

document.getElementById('content').style.height = ht;

<script language="javascript">
function getscreenInfo () {
var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;
    ht = y - 197;

    y += "px";
    document.getElementById('footer').style.top = y; // this will keep the 'footer' div below the visible screen. User will look at it only if he scrolls down to the bottom.
    ht += "px";
    //alert(ht);
//alert (document.getElementById('footer').style.top);
    document.getElementById('fixedImg').style.height = ht;
    document.getElementById('content').style.height = ht;

}
</script>