div의 너비 확장

Question

두 개의 div가 부동 소수점을 사용하여 하나의 섹션에서 작업하고 있습니다. 오른쪽 div가 표시되지 않을 때 왼쪽 div의 너비를 확장하려고합니다.

<style> 

    body{ 
     font-family:Arial, Helvetica, sans-serif; 
     font-size:12px 
    } 
    .mainContainer{ 
     width:300px; 
     border:blue solid 1px; 
     overflow:hidden 
    } 
    .leftCont{ 
     float:left; 
     border:green solid 1px 
    } 
    .rightCont{ 
     float:left; 
     border:red solid 1px 
    } 

</style> 

<div class="mainContainer"> 
    <div class="leftCont"> 
     Lorem ipsum dolor sit amet, consectetur 
    </div> 
    <div class="rightCont"> 
     right 
    </div> 
</div> 

내가 사업부/CSS 만에이 문제를 해결하려면 :

이 내가 뭐하는 거지입니다.

감사합니다, 그것은 할 수 없습니다 float:left와

Answer 1

display:table-cell를 사용하려고하면 의한 것을 달성 할 수 오른쪽에 div을 붙임으로써 마크 업을 약간 변경하십시오 :

<div class="rightCont"></div> 
<div class="leftCont"></div> 

그리고, 부동 당신의 오른쪽으로 div.rightCont 다음 왼쪽 사람에게 그것을 떠 whitout 오버 플로우 제공 : 당신이 원하는

.leftCont{ 
    overflow: hidden; 
    border: green solid 1px 
} 
.rightCont{ 
    float: right; 
    border: red solid 1px 
} 

Answer 2

, 당신이 괜찮다면 display:table 및

body{ 
     font-family:Arial, Helvetica, sans-serif; 
     font-size:12px 
    } 
    .mainContainer{ 
     width:300px; 
     overflow:hidden; 
     border:1px solid blue; 
     display:table; 
    } 
    .leftCont{   
     border:green solid 1px; 
     display:table-cell; 
    } 
    .rightCont{ 
     border:red solid 1px; 
     display:table-cell; 
    } 

DEMO