Làm thế nào để ngăn chặn nội dung nổi trong hai divs từ chồng chéo?

Question

Trong một trang FAQ Tôi đang cố gắng để làm cho tôi có một trang với cấu trúc này:

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

Đây là CSS liên quan:

#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; 
} 

nội dung trang của tôi được tìm thấy trong phần container, và chân trang nằm ngay bên dưới. faq_sidebar ngắn hơn nhiều so với faq_primary và bởi vì các cột ở chân trang đều được thả nổi bên trái, chúng kết thúc ở bên phải faq_primary, bên dưới faq_sidebar.

Dưới đây là một ảnh chụp màn hình:

Bất cứ lời khuyên để tôi có thể ngăn chặn các nội dung ở chân và container từ chồng chéo?

Answer 1

Bạn có thể thêm một thanh toán bù trừ div đây

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

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

</section> 

và sau đó phong cách nó như thế này

.clear{ 
    clear:both; 
} 

Nếu điều đó không làm điều đó, bạn có thể cần phải thêm nó sau khi </section>

Answer 2

Nếu mục này nằm trong vùng chứa:

<section id="container"> 

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

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

</section> 

và bạn muốn chúng được trình bày nội tuyến tại sao không kiểu #container với display: inline. Bạn đang sử dụng vị trí tuyệt đối cho #faq_sidebar và đó có thể là lý do nội dung chân trang chồng lên nhau

Answer 3

Thật khó để biết mà không nhận được nội dung giống như khi tôi thử tôi không thể tạo giống như ảnh chụp màn hình. (Do sự khác biệt về nội dung).

Nhưng tôi chắc rằng nếu bạn:

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

có gây ra các container để bao gồm những đứa trẻ nổi trong tính toán của nó đối với chiều cao.

Ngoài ra tôi sẽ đề nghị bạn thay đổi sidbar left: ...-right: 0 nếu bạn đang cố gắng p [osition nó trên quyền (hoặc float: right có thể là đúng thay vì vị trí tuyệt đối).

CHỈNH SỬA: - Tôi nhận thấy một trong các câu hỏi có liên quan có cùng câu trả lời và tôi có thể nghiêng để đề xuất rằng đây là bản sao. Câu hỏi: Make outer div be automatically the same height as its floating content

Answer 4

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

Có tài sản sử dụng để điều chỉnh và tránh để đi đến hình ảnh vào điều chỉnh bên phải hoặc bên trái của một hình ảnh div hoặc trước đó.

Answer 5

Xóa left:760px; từ #faq_sidebar.