GoldenLine
Zaloguj się

konto usunięte

Temat: Zachowanie float przy zagnieżdżeniu divów

Powiedzmy, że mam taki kawałek stronki:



<div id="outerFrame">

    <div id="innerFrame">bla bla bla</div>

</div>


Do tego mam zdefiniowane style:



#outerFrame  

{

	border:1px solid #222222;

	float:left;

	width:600px;

}



#innerFrame {

	border:1px solid #FF0000;

	float:left;

	height:50px;

	width:400px;

	margin-left:100px;

	margin-right:100px;

	margin-top:10px;

	margin-bottom:10px;

	text-align:center;

}


W przypadku, gdy usunę 'float:left;' z #outerFrame'a, FF rysując zewnętrzną ramkę ścieśnia ją do 1 pixela, natomiast Opera renderuje tak, że mieści się w niej ramka wewnętrzna. Które zachowanie jest poprawne wg standardu i dlaczego?

Moim zdaniem bardziej intuicyjne jest zachowanie Opery, jak robię ramkę wewnątrz ramki, to spodziewam się, że w zewnętrznej ramce będzie zawarta wewnętrzna, tak jak sugeruje to sam kod.Adam Michalski edytował(a) ten post dnia 01.09.10 o godzinie 19:31
Link do wypowiedziLink
Bartek Stańkowski

Bartek Stańkowski front-end & mobile
web developer

Temat: Zachowanie float przy zagnieżdżeniu divów

U mnie Opera zachowuje się tak, jak Firefox i jest to zachowanie poprawne.
Elementy floatowane są wyjmowane z normalnego obiegu elementów, dlatego kiedy #innerFrame ma floata, a #outerFrame nie, #outerFrame zachowuje się, jakby był pusty, dlatego jego wysokość = 0
Link do wypowiedziLink
Marcin Pawlas

Marcin Pawlas kocham poniedziałek

Temat: Zachowanie float przy zagnieżdżeniu divów

jeśli w kontenerze znajdują się same bloki z nałożonym float to traci on wartość wysokości, dlatego ramka jest 1px

długo rozwiązywano to poprzez dodanie clear:both do pustego bloku za elementami pływającymi aby wymusić wysokość kontenera.

Ja korzystam z innej metody która się sprawdza bardzo dobrze.

Dodaje do kontenera overflow: hidden; width: 100%;

width dla wymuszenia hasLayout a overflow wydaje mi się wymusza po prostu podanie wysokości bloku dla potencjalnego scrolla.
Link do wypowiedziLink

konto usunięte

Temat: Zachowanie float przy zagnieżdżeniu divów

Polecam bardzo wyczerpujące opisanie teorii "obiektów pływających": http://www.smashingmagazine.com/2007/05/01/css-float-t...
Link do wypowiedziLink

konto usunięte

Temat: Zachowanie float przy zagnieżdżeniu divów

Marcin Pawlas:
Ja korzystam z innej metody która się sprawdza bardzo dobrze.

Zestawienie dostępnych opcji - http://www.robertnyman.com/css-clearing-floats/css-cle...
Link do wypowiedziLink
Marcin Pawlas

Marcin Pawlas kocham poniedziałek

Temat: Zachowanie float przy zagnieżdżeniu divów

Waldek Mazurek:
Marcin Pawlas:
Ja korzystam z innej metody która się sprawdza bardzo dobrze.

Zestawienie dostępnych opcji - http://www.robertnyman.com/css-clearing-floats/css-cle...

najważniejsze że nie produkuje się pustych bloków ;)
Link do wypowiedziLink
Tomasz Nowakowski

Tomasz Nowakowski frontend developer

Temat: Zachowanie float przy zagnieżdżeniu divów

Marcin Pawlas:
Dodaje do kontenera overflow: hidden; width: 100%;

width dla wymuszenia hasLayout a overflow wydaje mi się wymusza po prostu podanie wysokości bloku dla potencjalnego scrolla.

Do wymuszania hasLayout moim zdaniem najlepszy jest zoom:1 w komentarzu warunkowym bo nie ingeruje w wyświetlanie.
Takie width: 100%; może skutkować czymś takim http://www.jsfiddle.net/h2SBT/
Link do wypowiedziLink
Marcin Pawlas

Marcin Pawlas kocham poniedziałek

Temat: Zachowanie float przy zagnieżdżeniu divów

Tomasz Nowakowski:
Marcin Pawlas:
Dodaje do kontenera overflow: hidden; width: 100%;

width dla wymuszenia hasLayout a overflow wydaje mi się wymusza po prostu podanie wysokości bloku dla potencjalnego scrolla.

Do wymuszania hasLayout moim zdaniem najlepszy jest zoom:1 w komentarzu warunkowym bo nie ingeruje w wyświetlanie.
Takie width: 100%; może skutkować czymś takim http://www.jsfiddle.net/h2SBT/

mówię o przypadku takim: http://jsfiddle.net/h2SBT/15/

tylko połączenie width i overflow daje efekt nadania blokowi wysokości określając wysokość floatów, zmiana overflow na zoom nie zda egzaminu, choć też wymusi hasLayout

wydaje mi się że width wyzwala podanie wartości wysokości dla overflow i w tym cała magia, nie znalazłem jednak potwierdzenia nigdzie tej teorii.Marcin Pawlas edytował(a) ten post dnia 01.09.10 o godzinie 20:22
Link do wypowiedziLink
Tomasz Nowakowski

Tomasz Nowakowski frontend developer

Temat: Zachowanie float przy zagnieżdżeniu divów

Marcin Pawlas:
mówię o przypadku takim: http://jsfiddle.net/h2SBT/15/

tylko połączenie width i overflow daje efekt nadania blokowi wysokości określając wysokość floatów, zmiana overflow na zoom nie zda egzaminu, choć też wymusi hasLayout

Nie zamiast "overflow", tylko zamiast "width: 100%". A podany przykład oczywiście nie zadziała bez width, bo width służy do ustalenia szerokości kolumny, a nie tylko do wywołania hasLayout. W takim wypadku dodatkowy zoom, już nie jest potrzebny. Ale wczesniej pisałeś o "width: 100%".
wydaje mi się że width wyzwala podanie wartości wysokości dla overflow i w tym cała magia, nie znalazłem jednak potwierdzenia nigdzie tej teorii.

Cała magia jest opisana tutaj http://www.satzansatz.de/cssd/onhavinglayout.html
Po prostu pod IE6 część rzeczy zaczyna działać dopiero kiedy element otrzyma hasLayout. W innych przeglądarkach wystarcza samo "overflow:hidden" (ew. overflow:auto, ale z tym bywają problemy pod starszymi przeglądarkami).
Link do wypowiedziLink
Marcin Pawlas

Marcin Pawlas kocham poniedziałek

Temat: Zachowanie float przy zagnieżdżeniu divów

Tomasz Nowakowski:
Cała magia jest opisana tutaj http://www.satzansatz.de/cssd/onhavinglayout.html
Po prostu pod IE6 część rzeczy zaczyna działać dopiero kiedy element otrzyma hasLayout. W innych przeglądarkach wystarcza samo "overflow:hidden" (ew. overflow:auto, ale z tym bywają problemy pod starszymi przeglądarkami).

dzięki za info, przydatne w zrozumieniu.
Link do wypowiedziLink

konto usunięte

Temat: Zachowanie float przy zagnieżdżeniu divów

Fajnie się wątek rozwinął.

Trafiłem ostatnio niezłą książkę:

http://books.google.pl/books?id=589iSbn9WYkC&printsec=...

Jest trochę przegadana, ale to jedna z niewielu pozycji książkowych, w której można znaleźć coś na temat layout'owania stron. Temat wcale nie jest trywialny. Tym bardziej dla kogoś takiego jak ja, który całe życie siedział w back-endzie, nigdy nie robił nic z front-endu.
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Float right i problem pod IE7




Wyślij zaproszenie do
Anuluj