Przepraszam jesli ten temat sie juz wczesniej pojawil ale mam nastepujacy problem:

Mam diva ktory ma background-color i w nim sa 2 divy ktore maja byc obok siebie, wiec nadalem 1 folat: left i jest ladnie pieksnie ale w firefoxie jest cos nie tak, poniewaz nadrzedna warstwa dostosowala sie do tej 2 warstwy.

Jak ten problem rozwiazac, aby tlo obejmowalo mi podrzedne warstwy, nie interesuje mnie nadawanie tla do podrzednych i podawanie wysokosci warstwy nadrzednej.

Float to tak w zasadzie niewiadomo do czego jest Użyj pozycjonowania absolutnego to je poustawiasz tak jak chcesz i w każdej przeglądarce bedzie tak samo. Bo odziwo IE to dobrze interpretuje, a na floatach się sypie..

Jak sobie nie poradzisz do daj linka do kodu.

Wlasnie pozycjonowania absolutnego raczej nie moge uzyc bo te divy musza byc zawieraja sie w divue ktory jest wysrodkowany. Myslalem w ostatecznosci o czyms takim jak min wysokosc dla diva. Wiem ze opera to olewa ale firefox nie.

Kod podesle wieczorem, bo nie mam narazie dostepu do my pc.


--------
Czy moglbys napisac przyklad jak bys to rozwiazal?

Bylo juz setki razy. Search twoj przyjaciel. Ile mozna o tym gadac? Tutaj, co 4 post o tym jest

@Strus: wiadomo do czego jest. Wiecej na w3c

@xarr Ok, to wskaz mi chociaz 1 post w ktorym jest ten problem rozwiazany, w taki sposob aby tlo diva nadrzednego obejmowalo 2 divy zawarte w nim z ustawionym float: left i zeby dzialalo w kazdej przegladarce?

Jak ten problem rozwiazesz to bede bardzo Ci wdzieczny


______________________

Oto przykladowy kod:

[PHP] pobierz, plaintext 
<?php
 
<div style=&#092;"width:500px; background-color:red;\">
  <div style=&#092;"float:left; width:100px;\">
   warstwa 1 asdfadsf asdfadsf asdfadsf
  </div>
  <div>
    warstwa 2</div>
  </div>
</div>
?>
[PHP] pobierz, plaintext 

No ale co przeszkadza pozycjonowanie absolutne do centrowania? Wystarczy wycentrować jakiś div przy pomocy margin:0 auto i dopiero w nim umieścić koloejnego diva w którym zastosuje się position:absolute i wszystko będzie względem tego absolut a swoją drogą na środku przeglądarki.

Przykład masz tu http://strusio.net/public/projects/psi-gentoo/ (generalnie strona nie jest skończona i jeszcze nie centruje się w IE(chyba) więc na reszte nie patz tylko na top) chodzi o topa jest zawsze na środku a wnim pozycjonowanie absolutene. No bo te cienie to nie jest CSS3 (bo byś tego nie widział) tlko właśnie absolute i jest na środku Ale to nieskładnie napisałem:P ale vhyba zrozumiesz

@xarr oj nie zrozumiałeś ironi

@Strus : a czy ten div który będzie wyśrodkowany, też nie musi być pozycjonowany absolute ?

@Strus Czyli podsumujac posta, nie uzywac float?

Lepiej on nie może być pozycjonowany absolutnie, bo jak go wyśrodkujesz ?


@SongoQ No w tym konkretnym (i w zasadzie w ogóle też) przypadku nie.

Tam na tejs stronce jest dużo styli, jak się nie dokopiesz do tego jak to zrobiłem, to wyciągne Ci z nich ten fragment który robi to oco pytasz w tym wątku.

Ok, bardzo bym prosil. Tak aby ten przyklad co podalem dzialal prawidlowo w firefoxie.

[HTML] pobierz, plaintext 
<div style="margin:0 auto;width:500px">
 
<div style="width:500px;height:100px;background:red;position:absolute">
 
  <div style="width:100px;position:absolute">
   warstwa 1 asdfadsf asdfadsf asdfadsf
  </div>
 
  <div style="position:absolute;margin-left:100px">
    warstwa 2</div>
  </div>
 
</div>
 
</div>
[HTML] pobierz, plaintext 

Nie wiem czy o to Ci chodziło, bo nie mam jak sprawdzić w IE, ale z Twojej wypowiedzi wywnioskowałem, że o to.
Generalnie sprawdzałem na silnikach Gecko KHTML i Presto, centruje się, tło diva1 jest widoczne w divie 2 i 3.


EDIT.
Właśnie dorwałem laptopa z Windowsem i widziałem to na IE, no trzeb dwie zmiany wprowadzić. Wystarczy dodać te dwa tekstalajny na końcu i działa w każdej tak samo

[HTML] pobierz, plaintext 
<div style="margin:0 auto;width:500px;text-align:center">
 
<div style="width:500px;height:100px;background:red;position:absolute;text-align:left">
 
  <div style="width:100px;position:absolute">
   warstwa 1 asdfadsf asdfadsf asdfadsf
  </div>
 
  <div style="position:absolute;margin-left:100px">
    warstwa 2</div>
  </div>
 
</div>
 
</div>
[HTML] pobierz, plaintext 

Sprawdzilem i dziala znakomicie. Szczerze powiem ze nawet nie myslalem o takim rozwiazaniu, troszeczke myslalem o innej metodzie, ale to dziala ok.

Bardzo dziekuje za pomoc.

Z reguły coś można zrobić na parę sposobów, ten wydaje mi się najprostszy.
Pewnie na floatach można by to zrobić.. ale po co? Jak będziesz tych elementów miał więcej obok siebie to nie ma takiej siły co to by floaty zmusiła do nieprzeskoczenia do nowej lini...

Co prawda podany kod działa, ale nie do końca. Gdy zwiększy się rozmiar tego div'a do 600px, to już nie znajduje się na środku (pod IE). Ktoś może mi wytłumaczyć, dlaczego w IE tak się dzieje i jak ten problem rozwiązać

pozdrawiam smar666

@smar666 Ale jesli wstawisz w jeszcze jednego diva i ustawisz wysrodkowanie dla niego to bedzie ok.

[HTML] pobierz, plaintext 
<div style="width: 500px; background-color: red; margin: 0 auto;">
	<div style="float: left; width: 100px;">
		warstwa 1 asdfadsf asdfadsf asdfadsf
	</div>
	<div>
		warstwa 2
	</div>
	<br style="clear: both;" />
</div>
[HTML] pobierz, plaintext 

clear! rozwiazanie Strus ma taka wade, ze ustala z gory wysokosc w height, a to nie jest dobre podejscie do problemu

Chwała ci sf ;-) już się zacząłem irytować po 11tym poście.
Czytać specyfikacje chłopaki...

z tym, że ustawienie clear'u dla <br /> to nie najlepszy pomysl - lepiej juz <hr /> (wyzerowany margines i padding oraz usuniety border)