두 div의 플로팅 콘텐츠가 겹치지 않게하려면 어떻게해야하나요? FAQ에 페이지에서

Question

나는이 구조와 나는 페이지를 만들려고 노력 해요 : 여기

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

내 페이지 내용이 섹션 container에서 발견된다, 바닥 글은 바로 아래에 있습니다. faq_sidebar은 faq_primary보다 훨씬 짧으며 바닥 글의 열이 모두 왼쪽으로 떠 있기 때문에 faq_sidebar 아래의 faq_primary 오른쪽으로 끝납니다.

어떤 조언은 그래서 중복의 바닥 글 내용과 컨테이너를 방지 할 수 있습니다 : 여기

는 스크린 샷입니까?

Answer 1

당신은 그것을하지 않으면, 당신은 </section> 후 추가해야 할 수도 있습니다

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

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

</section> 

여기 청산 사업부를 추가 한 다음이

.clear{ 
    clear:both; 
} 

처럼 스타일을 수

Answer 2

용기에 들어있는 경우 :

<section id="container"> 

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

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

</section> 

인라인으로 레이아웃하고 싶다면 display : inline으로 #container 스타일을 지정하는 것이 좋습니다. #faq_sidebar에 절대 위치 지정을 사용하고 있는데 그 이유는 풋터 내용이 겹치는 이유 일 수 있습니다.

Answer 3

내가 시도 할 때와 동일한 콘텐츠를 얻지 않고서는 알기가 어렵습니다. 스크린 샷과 동일하게 생성 할 수 없습니다. (내용의 차이로 인해).

하지만 난 당신이 경우 확실 해요 :

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

컨테이너 높이의 계산에 떠 아이들을 포함하게됩니다.

또한 난 당신이 바로 에 osition [P하려고하는 경우 right: 0에 sidbar left: ...를 변경 제안 (또는 float: right 대신 절대 위치의 정확한 수 있습니다).

EDIT : - 관련 질문에 동일한 대답이 있는데이 답변이 중복 된 것으로 나타 났을 수 있습니다. 질문 : Make outer div be automatically the same height as its floating content

Answer 4

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

오른쪽 또는 이전 DIV 또는 이미지의 왼쪽을 조정 조절하고에 이미지로 이동하지 않도록하는 데 사용되는 속성이있다.

Answer 5

left:760px;을 #faq_sidebar에서 삭제하십시오.