[IE6] aby wewnętrzne divy nie zwiększały wysokości zewnętrzego, z-index ? Opcje

[webcitron]

Mam problem z pewnym layoutem pod IE6.
Załóżmy że mam taką strukturę:

Kod

<div class='main'>
       <div class='top'></div>
       <div class='bottom'></div>
     </div>

Oczywiście zakładamy że .top i .bottom są wypełnione tekstem.
CSS wyglądałby mniej więcej tak:

Kod

.main{ height: 50px; }
     .top{ height: 40px; }
     .bottom{ height: 20px; }

Chciałbym osiągnąć taki efekt żeby .bottom niejako "wystawał" za .main ale nie rozciągał go na wysokość Oczywiście rzecz rozbija się o IE w sławetnej wersji 6.. Ktoś wie jak osiągnąć taki efekt ?

Przykład można zobaczyć/pobrać tutaj: lab.webcitron.pl/anonse/html/test.html (pod FF działa idealnie)

[Quider]

W css jest taki bajer, który się nazywa overflow...

[webcitron]

O bajerze zwanym overflow wiem już od dawna, ale w tym przypadku nie wiem jak miałby on pomóc.
Wartość hidden schowa nam wystający element.. Kombinacja overflow:hidden na .main i overflow:visible na .bottom też nic nie da

--- EDIT
Pomogło gdy na .main dałem overflow:hidden a na bottom position:relative
Temat do zamknięcia

Ten post edytował webcitron 12.03.2009, 11:15:00