Как предотвратить наложение плавающего содержимого в двух разделах?

На странице часто задаваемых вопросов я пытаюсь создать страницу с такой структурой:

<section id="container">

     <div id="faq_primary"></div>
     <div id="faq_sidebar"></div>

</section>

<footer>

     <div id="directory">

          <div id="col_a"></div>
          <div id="col_b"></div>
          <div id="col_c"></div>

     </div>

</footer>

Вот соответствующий CSS:

#container {
    width:960px;
    margin: 0px auto;
    position:relative;
}

#faq_primary {
    width:720px;
    margin:20px 40px 0 0;
    position:relative;
    float:left;
    display:inline; 
}

#faq_sidebar {
    left:760px;
    position:absolute;
}

footer {
    width:1111px;
    height:250px;
    margin:90px auto 0px;
    position:relative;
    background-image:url(../images/footer/bg.png);
    color:#7d7d7d;
}

#directory {
    width:960px;
    margin:0px auto;
    padding-top:25px;
    font-size:13px;
}

#directory ul li{
    padding-bottom:4px;
}

#dir-cola, #dir-colb, #dir-colc, #dir-cold, #dir-cole {
    width:174px;
    height:140px;
    float:left;
}

#dir-cola {
    width:150px;
}

#dir-cole {
    width:143px;
}

Содержание моей страницы находится в контейнере раздела , а нижний колонтитул находится непосредственно под ним. faq_sidebar намного короче, чем faq_primary , и поскольку все столбцы в нижнем колонтитуле плавают влево, они заканчиваются справа от faq_primary, под faq_sidebar.

Вот снимок экрана:

Можно посоветовать, чтобы содержимое нижнего колонтитула и контейнера не перекрывалось?