Tworzenie podstawy strony - problem Opcje

[Micchaleq]

Witam,

niestety nigdy rewelacyjnie nie rozumiałem kwestji divów oraz opcji float.
Nie mniej jednak coś tam kombinuje.

Moj problem polega na tym, ze moja stopka nachodzi na kolumnę main oto przykładowy kod:

[HTML] pobierz, plaintext 
<style>
.top{
	width:800px;
	border:1px solid black;
}	
.main{
	width: 800px;
	border:1px solid blue;
}
 
.foot{
	width: 800px;
	border:1px solid orange;
}
.lewa{
	float: left;
	width: 300px;
	border:1px solid red;
}	
.prawa{
	float: left;
	width: 300px;
	border:1px solid green;
 
}
</style>
<div class="top">baner</div>
 
<div class="main">
	<div class="lewa">aa</div>
	<div class="prawa">bb</div>	
</div>
<div class="foot">stopa</div>
[HTML] pobierz, plaintext 

Czy ktoś mógłby mi powiedzieć dlaczego się tak dzieje?

[Sephirus]

Daj jej (stopce) "clear:both" albo jeszcze lepiej przed zamknięciem diva klasy "main" jakiś elementem z tym stylem (clear:both)

Otóż floaty są jak klej... jak coś ma floata to wszystko po nim się będzie starało do tego przyklejać Jak dasz clear:both (ew. left lub right) to kasujesz "przyklejanie" się elementów od tego dalej

HTH!

EDIT:

Najlepszym w ogóle nawykiem jest tzw. zamykanie "floatów" przykład:

[HTML] pobierz, plaintext 
<!-- JAKIŚ KOD... -->
<div class="kontener">
     <div class="blok_z_float">(...)</div>
     <div class="blok_z_float">(...)</div>
     <div style="clear:both"></div> <!-- To jest właśnie "zamykanie floatów" ;) -->
</div>
<!-- JAKIŚ KOD... -->
[HTML] pobierz, plaintext 

Po elementach z float, najlepiej jeszcze w ich kontenerze należy "zamknąć" floaty - dlaczego? właśnie dlatego by kod poniżej nie był przesuwany przez ten wyżej oraz po to by element kontenera miał poprawną wysokość w DOM. Często jest tak, że element, w którym znajdują się tylko elementy mające float ma niepoprawną wysokość.

Ten post edytował Sephirus 20.10.2011, 15:05:39