[CSS][HTML] 3 divy obok siebie i jeden na dole - auto height Opcje

[arkos]

Witajcie.

Mam problem z divami. Umieszczam 3 divy obok siebie w innym divie, ich wysokość musi być automatyczna, gdyż jest tam tekst, którego rozmiar będzie różnej wysokości.
A pod tymi głównym divem, w którym są te trzy będzie inny na całą szerokość. Problem polega na tym, iż divy z treścią nie rozsuwają się.

[HTML] pobierz, plaintext 
	<div id="bottom">
		  <div id="bottom-left">
			 <h3>Dlaczego my ?</h3><img src="images/home-why.png" alt="" />
			 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut turpis eu lorem cursus ornare quis ac erat. Donec tristique justo scelerisque dui auctor semper accumsan quam porta. Aenean pretium libero eu elit vestibulum sed condimentum lectus tristique.
		  </div>
		  <div id="bottom-center">
			 <h3>O firmie</h3><img src="images/home-aboutus.png" alt="" />
			 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut turpis eu lorem cursus ornare quis ac erat. Donec tristique justo scelerisque dui auctor semper accumsan quam porta. Aenean pretium libero eu elit vestibulum sed condimentum lectus tristique.
		  </div>
		  <div id="bottom-right">
			 <h3>Kontakt</h3>
			 Jeżeli mają Państwo jakieś pytania dotyczące naszej oferty, prosimy o kontakt przy użyciu poniższych danych kontaktowych lub skorzystanie z formularza kontaktowego zamieszczonego na podstronie "Kontakt".
		  </div>
	</div>
 
<div id="footer">stopka ...</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
#bottom{
margin: 0 12px 0 12px;
background: yellow;
}
 
#bottom-left{
float: left;
width: 300px;
margin-right: 17px;
}
 
#bottom-center{
float: left;
width: 300px;
margin-right: 17px;
}
 
#bottom-right{
float: left;
width: 300px;
}
 
#footer{
width: 951px;
height: 32px;
padding: 8px 0 0 15px;
background: red;
font: 12px font1-1, sans-serif;
color: #ffffff;
}
[HTML] pobierz, plaintext 

To powinno dać efekt, że tło tych pól wszystkich jest żółte, a pasek stopki czerwonej jest na dole.

(IMG:style_emoticons/default/smile.gif)

Ten post edytował arkos 7.02.2012, 12:23:28

[strife]

O to Ci chodzi?

* http://matthewjamestaylor.com/blog/equal-h...er-css-no-hacks
* http://matthewjamestaylor.com/blog/ultimat...tyle-pixels.htm

?

[arkos]

Nie, skopiuj sobie ten kod do notatnika, np. i zobacz jak to wygląda.
Stopka jest na samej górze, gdzie zaczynają się te trzy divy. Niezależnie ile tych divów jest, jeżeli ustawię, w którymś float to tak się dzieje, stopka idzie na samą górę, a nie jest pod divem.

[strife]

Spróbuj dodać nad div'em #footer:

[HTML] pobierz, plaintext 
<div style="clear: both"></div>
[HTML] pobierz, plaintext 

[arkos]

Próbowałem, nic.

[strife]

No ale u mnie działa, albo nie rozumiem, hm.

(IMG:http://img11.imageshack.us/img11/8072/selection049.png)

Dodaj też tak gdzie się kończy div #bottom to samo.

[HTML] pobierz, plaintext 
<div style="clear: both"></div>
[HTML] pobierz, plaintext 

Powód edycji: [strife]: Update

[arkos]

LóL (IMG:style_emoticons/default/haha.gif)
Przedtem robiłem i nie działało mi, nie wiem co mu się odmieniło hehe.

PS. To był tylko krótki wycinek (to co wstawiłem na forum) co podałem z szablonu strony i trochę przerobiony.

Dzięki!

Ten post edytował arkos 7.02.2012, 16:36:50