[xhtml][css] Za krótki box zawierający float

[gamecreator]

Siema.
Kombinuję jak zrobić na CSS layout 2-kolumnowy dla mojej stronki.
http://www.wsi.edu.pl/~sistudem/nowa/01_BudProg.html
Zadowolony że stronka ładnie się wyświetla w IE 5.5 i Opera 7.23, postanowiłem sprawdzić jeszcze pod Firefoxem i... ZGROZA Pojemnik, zawierający treść floatowaną do lewej i panel menu po prawej, kończy się tam gdzie panel boczny, zamiast dociągać się do długości najdłuższej z kolumn :/ Okazało się że pod Operą 8.5 efekt jest identyczny.

Po dokładniejszym wczytaniu się w specyfikacje W3C to już totalnie się załamałem ;( bo okazuje się że takie zachowanie jest poprawne - float jest wyjmowany z normalnego przepływu dokumentu i nie jest brany pod uwagę przy obliczaniu wysokości pojemnika. Jedynie niefloatowana treść [czyli w moim przypadku te pudełeczka z menu po prawej] ma wpływ na wysokość całego pojemnika.

Pytanie brzmi: jak sobie z tym poradzić? Czytałem już w kilku miejscach jak zrobić by kolumny wyglądały jakby miały jednakową długość [Faux Columns, czyli sposób z obrazkiem pod pojemnikiem który zawiera obie kolumny] jednak w tym przypadku nie uda mi się tego zastosować, jeśli pojemnik nie będzie tak długi, jak najdłuższa z kolumn :/

[Zajec]

Przed zamknięciem #middle wstaw element, który nie będzie float'owany - dzięki temu rozciągnie on #middle.

Dodatkowo nadaj mu clear: both; aby umiscowił się pod najdłuższą kolumną.

Przykład: przed zamknięciem #middle dodajesz
<br style="clear: both;" />

Możesz też zrobić to za pomocą CSS

Kod: Zaznacz cały

#middle:after {
display: block;
content: "";
clear: both;
}

[gamecreator]

Przed zamknięciem #middle wstaw element, który nie będzie float'owany - dzięki temu rozciągnie on #middle.

Dodatkowo nadaj mu clear: both; aby umiscowił się pod najdłuższą kolumną.

Przykład: przed zamknięciem #middle dodajesz
<br style="clear: both;" />

I może jeszcze na wszelki wypadek we wszystkich innych pojemnikach? Bo przecież nigdy nie wiem czy inny layout nie będzie wymagał innego rozmieszczenia tych elementów ;/
To rozwiązanie raczej mnie nie ratuje, bo jest totalnie niesemantyczne. Po to daje się warstwę prezentacji do CSS, żeby nie dawać jej w XHTML zwiększając niepotrzebnie śmietnik w kodzie.

Możesz też zrobić to za pomocą CSS

Kod: Zaznacz cały

#middle:after {
display: block;
content: "";
clear: both;
}

To już prędzej, bo przynajmniej nie wymaga zmian "prezentacyjnych" w XHTML. Zastanawiam się tylko które przeglądarki będą obsługiwać taki myk, a które nie [CSS content generation]. Pewnie znów IE mi wypnie d*** ;J [na szczęście jego bug tym razem pewnie pomoże zamiast szkodzić].

Heh... no cóż... jeśli to jedyna możliwość...
Na szczęście pewnie będę miał jakąś stopkę czy coś w tym layu, więc mogę JĄ clearnąć i będzie ładnie i semantycznie ;J

Dzięki [chyba że jeszcze ktoś ma jakieś pomysły to chętnie się dowiem czegoś nowego ]

[Zajec]

To już prędzej, bo przynajmniej nie wymaga zmian "prezentacyjnych" w XHTML. Zastanawiam się tylko które przeglądarki będą obsługiwać taki myk, a które nie [CSS content generation]. Pewnie znów IE mi wypnie d*** ;J [na szczęście jego bug tym razem pewnie pomoże zamiast szkodzić].

pseudoelementy before i after są obsługiwane przez Operę, Firefoksa i Konquerora (a z tego prawie wynika, że także przez Safari). Nie obsługuje tego IE, który jednak ma buga i floatowane elementy wpływają na rozmiar dodziców... Więc dzięki temu bugowi nie potrzebujemy dla IE żadnego clear'owania

Podsumowując: możesz spokojnie tego używać.

[gamecreator]

No to fajnie

A, jeszcze jedna sprawa.
"tomasiek" podsunął mi jeszcze jeden sposób chyba. Bo gdy dla pojemnika zawierającego float ustawi się "position: absolute" to jakimś cudem pojemnik rozciąga się by objąć także tego wewnętrznego floata.
Nie wiem tylko dlaczego tak jest, ani co na to standard.

Jak patrzyłem to rzeczywiście: tylko w sekcji o elementach blokowych w zwykłym przepływie dokumentu pisze, że przy obliczaniu wysokości mają nie uwzględniać floatów. Natomiast w sekcji o elementach blokowych wyjętych z normalnego przepływu [np. pozycjonowanych absolutnie] nie pisze już tego. Tylko nie wiem czy zapomnieli o tym napisać, czy celowo nie pisali bo one już mają brać te floaty pod uwagę. Twórcy przeglądarek Opera i Firefox uznali chyba, że skoro nie pisze że ma nie brać floatów pod uwagę, to ma brać i tak działają ;J

Więc jak to w końcu jest?

[Zajec]

Tego nie wiem, w absolutne się nie bawiłem i nigdy mi się nie podobało Mozliwe, że jest dokładnie tak jak mówisz.

[argasek]

Myślę, że zainteresować może Cię ta strona.