Autodopasowanie div'ów

[bies]

Witam serdecznie!

Mam taki problem i już od dłuższego czasu nie mogę tego rozwiązać. Otóż mam powiedzmy pare (3-4) warstwy w jednej "głównej warstwie". Podczas wprowadzania tekstu w jednej z wewnętrznych warstw zmienia ona wielkość i wychodzi za obszar głównej warstwy. Jak zrobić żeby tak główna warstwa dopasowywała się?

Mam nadzieję, że nie zamotałem

Drugie pytanie:
Mam warstwę a w niej tabelkę. Warstwa nastawiona na autodopasowanie (wysokość i szerokość). Gdy nie ma w niej żadnego tekstu cała warstwa praktycznie znika (jest pusta). Czy można w jakiś sposób zadeklarować jej minimalna wielkość? Tak żeby cała się nie zwijała.

dzięki wielkie za jakąkolwiek odpowiedź.

b.

[Marcin Kalisz]

W kwestii pierwszego pytania: trochę za mało danych. Nie wiadomo czy ustawiłeś wysokość/szerokość na stałe, nie wiadomo też czy np. pojemnik nie jest pływający (float), a już wewnętrzne divy są. Jeśli wewnętrznym divom nadałeś float, a pojemnikowi nie, to divy wyjdą z pojemnika. Trochę strzelam, bo przyczyn może byc wiele, a opis dość skąpy.


Pytanie drugie: trzeba zastosować atrybut minimalnego wymiaru czyli np.

min-height: 400px; height: auto;

Problem w tym, że IE6 nie rozumie min-height i widzi jedynie height: auto (więc nadal będzie się wszystko zwijać do zera). Załatwić to można prostym hackiem dodając do kodu CSS nastepującą linijkę:

*html div#nazwa_warstwy {height: 400px}

IE6 uznaje to jednocześnie za min-height i height więc dla większości popularnych przeglądarek problem jest rozwiązany.

[Marcin Kalisz]

Najlepiej będzie jak wstawisz link do strony.

[bies]

Dzięki wielkie za odpowiedź.

Co do pierwszego:

Nie mam jeszcze tej strony w sieci. Podaje mój "szkic":



załóżmy, że nie mam żadnych ustawień. Warstwa główna musi się dopasowywać do warstwy wiadomość. Jak to najlepiej ugryźć?

[bies]

Nikt nie pomoże?

[koziolek]

min-height jest fajne ale nie ruszy pod IE6 (bug).

Warstwy wewnętrzne najprawdopodobniej są floatowane? Należy wtedy wznieść modły do wielkiego googla by podzielił się swoją wiedzą na temat haku znanego pod nazwą "clearfix"

W skrócie polega to na dodaniu za pomocą :after niewidocznego boxu który ma clear:both. wtedy główny kontener automatycznie rozciągnie się do wymaganego wymiaru. Można to też zrobić ręcznie dodając na końcu kontenera jeszcze jeden box z taką oto regułą:

Kod: Zaznacz cały

.clearfix2{
visible: hidden;
display: block;
width: 100%;
height: 1px;
overflow: hidden;
clear: both;
}

[tominnen]

Na mojej witrynie problem min-height dla IE6 rozwiązałem następująco:

div#nazwa_warstwy{
min-height:990px;
height:auto !important; koniecznie z tym important!
height:990px;
}
ładnie dopasowuje, działa pod FF, Operą, IE6, IE7, Netscape...

Moje warstwy również są floatowane więc nie wiem po co są potrzebne te clearfixy w poprzednich postach...

[koziolek]

tominnen, zastąpileś jednego haka innym tylko jedna uwaga. podanie height: 990px powoduje że IE6 będzie zawsze wyświetlał ten element z wysokością 990px. Tym samym element floatowany który będzie wewnątrz i będzie większy niż 990px i tak "wypłynie" poza kontener. Clearfix działa inaczej. na samum końcu dodaje element "czyszczący" (clear: both) float.
Czyli teraz mamy taką sytuację, że kontener musi byc na tyle wysoki by pomieścić wszystkie elementy. Ostatni czyszczący element jest poniżej elementów floatowanych więc jego odległość od górnej krawędzi kontenera powinna wynosić tyle ile wysokość najwyższego elementu floatowanego + marginesy. z tego wynika że wysokość kontenera musi wynosić tyle co wysokość elementu czyszczącego + jego odległość od górnej krawędzi. to jest odpowiedź na pierwsze pytanie.
Na drugie pytanie moja odpowiedź to użycie expressions (js w css dla IE), które pozwala na ładne i nieinwazyjne (komentarz warunkowy) oddzielenie kodu css od kodu dla IE.

trochę o expressions na bloku riddla:
http://riddle.jogger.pl/2007/01/14/expr ... -css-w-ie/