How to prevent floating content in two divs from overlapping?

Question

In a FAQ page I'm trying to make I have a page with this structure:

<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>

Here is the relevant 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;
}

My page content is found in the section container, and the footer is directly below. The faq_sidebar is much shorter than faq_primary, and because the columns in the footer are all floating left, they end up to the right of the faq_primary, below the faq_sidebar.

Here's a screenshot:

Any advice so I can prevent the content in the footer and container from overlapping?

Answer 1

Its hard to know without getting the same content as when i try thhis i can't produce the same as the screenshot. (Due to differences in content).

But I'm pretty sure if you:

#container
{
    // ... *snip*
    overflow: hidden;
}

Will cause the container to include the floated children in its calculation for height.

Also I would suggest you change the sidbar left: ... to right: 0 if you are trying to p[osition it on the right (alternatively float: right might be correct instead of positioning absolute).

EDIT:- I noticed one of the related questions had the same answer and i might be inclined to suggest that this is a duplicate. Question: Make outer div be automatically the same height as its floating content

Answer 2

You could add a clearing div here

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

<div class="clear"></div>

</section>

and then style it like this

.clear{
    clear:both;
}

If that doesn't do it, you may need to add it after the </section>

Answer 3

clear:both;
clear:left;
clear:right;

There are the property used to regulate and avoid to go to the image into adjust right side or left side of a previous div or image.

Answer 4

If this is in a container:

<section id="container">

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

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

</section>

and you want them laid out inline why not style #container with display: inline. You are using absolute positioning for #faq_sidebar and that might be why the footer content is overlapping

Answer 5

Remove left:760px; from #faq_sidebar.