테두리가있는 동적 높이 콘텐츠 영역 내에 올바르게 나란히 표시되는 두 개의 side-by-div를 얻으려면 어떻게해야합니까?

Question

테두리가있는 메인 콘텐츠 영역 div가 있습니다. 이 영역 안에 2 개의 열을 나란히 놓고 싶습니다. 문제는 왼쪽 또는 오른쪽 영역 중 하나의 내용이 이상 250 픽셀 인 경우 주 영역의 테두리의 중간에 흐름보다 이들과 모두 왼쪽 떠 있다는 것입니다

<div id="main-area"> 
    <div class="left-subcontent">left content</div> 
    <div class="right-subconent">right content</div> 
</div> 

#main-area 
{ 
    margin-left: 160px; 
    border-left: solid; 
    border-bottom: solid; 
    border-right: solid; 
    min-height: 250px; 
    padding: 15px; 
    border-color: #C9C299; 
} 

.left-subcontent { float: left; width: 200px; } 
.right-subcontent { float: left; width: 200px; } 

처럼 지금 내 HTML은/CSS를 본다 이 콘텐츠 영역 (그리고이 divs 내부로 흘러가는 꼬리말을 추가하는 경우 느낌이 있습니다.) 내가 필요한 것은 주요 영역의 경계가 내부의 모든 콘텐츠 주위에 있다는 것입니다.

누구나 내가 2 개의 동적 크기의 열 (둘 중 어느 것이 더 많은 콘텐츠를 가질 수 있는지)을 경계로 어떻게 달성 할 수 있는지 알 수 있습니까?

Answer 1

당신은 플로트 종료 사업부를 추가해야합니다 :

<div id="main-area"> 
    <div class="left-subcontent">left content</div> 
    <div class="right-subconent">right content</div> 
    <div class="clear"></div> 
</div> 

#main-area 
{ 
    margin-left: 160px; 
    border-left: solid; 
    border-bottom: solid; 
    border-right: solid; 
    min-height: 250px; 
    padding: 15px; 
    border-color: #C9C299; 
} 

.left-subcontent { float: left; width: 200px; } 
.right-subcontent { float: left; width: 200px; } 
.clear { clear: both; } 

이 그것을 할 것입니다.

Answer 2

메인 div에서 오버플로 : auto를 시도해 볼 수 있습니다. 이렇게하면 콘텐츠 div에 맞게 확장해야합니다.