automatyczna wysokość dla diva w którym są floaty

Ostatnio zaskoczyła mnie pewna sytuacja:

<div style="width: 200px" class="outer">
  <div style="width: 50px; float: left">
    lorem ipsum
  <div>
   <div style="width: 150px">
    lorem ipsum
  </div>
</div>

okazuje się że w takiej konstrukcji div.outer nie zwiększa automatycznie swojej wysokości wraz ze zwiększaniem się ilości tekstu w divach wewnętrznych. Jeśli skasuje się float, to oczywiście wysokość jest zwiększana zgodnie z oczekiwaniem, ale po dodaniu float - nie.

Trochę się naszukałem rozwiązania tego problemu, dlatego go tu publikuję, żeby nie zapomnieć


Ten zewnętrzny div.outer powinien mieć dodatkowy atrybut - overflow: auto.
Co ciekawe, zawsze myślałem że overflow: auto spowoduje pojawienie się paska przewijania ... ale jak widać nie w tym przypadku, przetestowane w FF, Chrome, Opera i IE, czyli chyba OK

<div style="width: 200px; overflow: auto " class="outer">
...
</div>