높이가 지정되지 않은 경우 다른 div 아래 div 유지하는 방법?

Question

나는 두 div (#left 및 #right)를 포함하는 #main div가 있습니다. #main 다음에 다른 div #below_main이 있습니다.

문제점 : 높이는 다음 #main 대해 그 콘텐츠 혼란 #below_main 설정되어 있지 않은 경우. #main의 정적 높이를 원하지 않습니다. 콘텐츠 게시량이 콘텐츠 금액에 따라 동적으로 변경되기 때문입니다.

그래서 내가 #main에 대한 min-height을 시도했지만 내가 아니라도 작동하지 않습니다 #main에 대한 relative에 position을 시도 작동하지 않습니다.

이제 #main #left 내용이 어떤 문제로이 문제를 설정하는,하지만 #main_below 콘텐츠 (#main) DIV 후 시작하는 방법.

나는 왼쪽에서 어떤 차이가 나는지 생각합니다. 그렇게하면 제게 설명해주십시오. 어떤 도움이 필요합니까?

CODE

HTML

<div id="main"> 
    <div id="left"> 
    <!-- Dynamic contents -->   
    </div> 
    <div id="right"> 
    </div> 
</div> 
<div id="below_main"> 
    <ul class="st"> 
     <li>list1</li> 
     <li>list2</li> 
     <li>list3</li> 
     <li>list4</li> 
    </ul> 

    <ul class="st"> 
     <li>list1</li> 
     <li>list2</li> 
     <li>list3</li> 
     <li>list4</li> 
    </ul> 

    <ul class="st"> 
     <li>list1</li> 
     <li>list2</li> 
     <li>list3</li> 
     <li>list4</li> 
    </ul> 

    <ul class="st"> 
     <li>list1</li> 
     <li>list2</li> 
     <li>list3</li> 
     <li>list4</li> 
    </ul> 
</div> 

CSS

#main { 
     background: #ffffff; 
     width:980px; 

     margin-top:20px; 
} 
#main #left { 
    width:610px; 
    float: left; 
    padding:0 0 0 40px; 
} 

#main #right { 
    width:280px; 
    float:right; 
    padding:0 25px 0 0; 
} 
#below_main { 
    height:225px; 
    width:980px; 
    border:1px solid #dddddd; 
    margin-top:20px; 
    border-radius: 10px; 
    background:rgb(0,100,0); 
} 
#below_main ul.st { 
    list-style: none; 
    margin: 50px 0 0 0; 
    padding: 0 0 0 55px; 
    float:left; 
    width:140px; 
    font-size: 11px; 
} 

JSFIDDLE

편집

덕분에이 모든 질문을 게시 한 후, clear:both 당신이 어떤 생각을 가지고있는 content.Do 개까지 충전되지 않은 배경 색상을 제외한 데 도움이? 나는 이것이 높이가 지정되지 않았기 때문이라고 생각합니다. 높이가 없으면 그렇게 지정해야합니까? Check This fiddle

Answer 1

below_main에 clear: both; 스타일을 추가하십시오.

편집 : 지정된 배경색으로 #main div를 채우려면 #main 요소 자체에 명시적인 높이를 설정하지 말고 bgcolor를 #left 및 #right div에 대신 적용 할 수 있습니다.

#main > div { background-color: mycolor; } 

편집 2 : 스타일 .clear{ clear:both}와 #main의 폐쇄 이전 추가 '<div class="clear"></div> : @sun 더 나은 솔루션 내가 여기에 포함됩니다 느릅 나무를 발견 할 수 있었다. 이는 배경색 문제와 내용 모두에 도움이됩니다.

Answer 2

업데이트를 해결하려면 기본 div에서 clearfix를 사용해야합니다.

See the updated fiddle here.

나는 개인적으로 내가 어디서든`clear`이 표시되지 않는이

.cf:before, 
.cf:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.cf:after { 
    clear: both; 
} 

/** 
* For IE 6/7 only 
* Include this rule to trigger hasLayout and contain floats. 
*/ 
.cf { 
    *zoom: 1; 
}