css로 레이아웃 잡을때-float:left를 줘도 컨테이너의 높이를 유동적으로 변하게 하고 싶을때.

a.html

참고 : http://www.quirksmode.org/css/clearing.html

A. 보통 잡는 레이아웃형태 

<style>

div.a {border:1px solid red;width:200px;}

div.b {float:left;border:1px solid green;width:50px}

div.c {float:right;border:1px solid blue;width:50px}

</style>

 <div class="a">

<div class="b">B</div>

<div class="c">C</div>

</div>

float:left로 잡으면 a class의 height를 고정형으로 잡거나 안잡으면 0px로 잡혀 백그라운드 이미지 적용시 어렵다.

B. 컨테이너 div의 height 도 같이 늘어나게

<style>

div.a1 {border:1px solid red;width:200px;overflow:hidden;}

div.b1 {float:left;border:1px solid green;width:50px}

div.c1 {float:left;border:1px solid blue;width:50px}

</style>

 <div class="a1">
<div class="b1">B</div>
<div class="c1">C</div>
</div>
 
overflow 옵션을 주면 해결됨. 원하는 결과에 따라 auto, hidden 아무거나 줘도 된다.
결과적으로 width:200px;overflow:hidden(auto);  는 꼭 필요