Cześć, mam mały problem z html/css:
Tworze element div, w którym umieszczam dwa kolejne, pływające divy, wszystkie mają ramki. Wygląda zgodnie z oczekiwaniem w Operze i IE, za to w Mozilli dwie środkowe ramki są poza ramką główną (screenshot i kod źródłowy w załączniku). Czy robie coś nie tak? Jeśli nie to czy jest jakiś sposób obejścia tego?
eksperyment.zip
moze dodaj w div A cos z clear: both;
Nic nie daje
Moze podaj adres do strony online, gdzie mozna obejrzec to na zywo. Sciaganie i rozpakowywanie zipow i odpalanie pliku samemu zabiera za duzo czasu...
M.
Strona: http://pabl0s.w.interia.pl/eksperyment.html
Screehshot Mozilli: http://pabl0s.w.interia.pl/Firebird.gif
edit: Ale brzydkie rzeczy doklejają do dokumentów na interii...
Kazdy float jest wyjety z document flow i nie ma wplywu na wysokosc elementu. Musisz dodac content do parent div, albo zapodac wysokosc, albo minimalna wysokosc. Nie ma innej rady.
M.
edit: troche uproscilem.
a to ciekawe. to jak w css zrobic odpowiednik good'ol <img align=right>?
Czy chodzi o to http://www.w3.org/TR/CSS21/generate.html#content?Podsumowujac, musisz dodac content do parent div
A może da się zrobić to bez flow - podając pozycje, albo coś, chodzi mi o to by uzyskać efekt, aby te bloki były w ramce obok siebie - niekoniecznie w ten sposób co próbowałem.
Dopiero się tego uczę, więc przepraszam za moją niewiedzę i głópie pytania.
Originally posted by porneL
a to ciekawe. to jak w css zrobic odpowiednik good'ol ?
Na wiele sposobow. Najlepszy jest taki, by dodac content, zeby obrazek mial kolo czego plywac. A jak nie, to dodaj display: table-cell do parent element.
M.
Tak. Moose ma rację. Na tej stronie: http://trats.ozforces.com.au/opera/tests/floatstretching.html jest opis błędu.
Spróbuję, również wyjaśnić po polskiemu w czym problem. Otóż jeśli ustawisz element B (będący dzieckiem elementu A) jako blok pływający, to wtedy element B powinien być wyjęty ze układu strony, tzn jego wymiary nie mogą mieć wpływu na układ strony, co jak widać nie jest prawdą w przypadku przeglądarki Opera oraz MSIE. Element pływający rozciąga element A (jego rodzica).
Możesz dodać jakiś tekst do A albo ustawić właściwość: min-height elementu A tak, żeby element A obejmował obydwa pływające elementy.