래퍼로 바닥 글 푸트 다운

Question

내 <div id="wrapper">에있는 요소를 가져 와서 바닥 글을 내리 누르는 데 문제가 있습니다. 현재 랩퍼는 바닥 글로 흘러갑니다. 어떻게 해결할 수 있습니까? 다음 CSS와

<div id="header"> 
</div> 
<div id="wrapper"> 
    <div id="findcontent"> 
    <div id="criteriabar"> 
    </div> 
    <div id="searchresults"> 
    </div> 
    </div> 
</div> 
<div id="footer"> 
</div> 

:

#header { 
    position: relative; 
    display: block; 
    height:65px; 
} 

#wrapper { 
    right: 0; 
    left: 0; 
    position: relative; 
    padding: 0; 
} 

#findcontent { 
    position: relative; 
    min-width: 960px; 
    min-height: 400px; 
    margin: 0 20px; 
} 

#criteriabar { 
    position: relative; 
    float: left; 
    width: 190px; 
    border-right: 1px solid #CCC; 
    height: 100%; 
    padding-right: 20px; 
    left: 30px; 
    top: 30px; 
} 

#searchresults { 
    position: relative; 
    width: 770px; 
    left: 40px; 
    right: 10px; 
    top: 30px; 
} 

#footer { 
    display: block; 
    zoom: 1; 
    position: relative; 
    overflow: hidden; 
    border-top: solid 1px #CCD9FF; 
    margin: 20px 0px 10px; 
} 

UPDATE :는 그것을하지 않았다 혼자 class="clearfix" 추가

여기 내 HTML입니다. <div id="find content"> 내부의 부동 요소에 대해서도 top을 margin-top으로 변경해야했습니다.

Answer 1

삭제해야 할 래퍼 내부에 div가 플로팅되었습니다.

옵션 1 : 다음 두 가지 옵션이 있습니다

#wrapper { 
    right: 0; 
    left: 0; 
    position: relative; 
    padding: 0; 
    overflow:hidden; /* This guy */ 
} 

옵션 2 :

// CSS

.clear { 
    clear: both; 
} 

// HTML

<div id="wrapper"> 
    <div id="findcontent"> 
    <div id="criteriabar"> 
    </div> 
    <div id="searchresults"> 
    </div> 
    </div> 
    <div class="clear"></div>