Cześć koderzy. Chciałbym was się poradzić. Czy lepszym sposobem jest stworzenie dwóch kolumn strony WWW na float:left; czy na display:table; ?

Nie interesuje mnie już IE6/7. Które z poniższych rozwiązań jest lepsze na dłuższą metę? Bardziej elastyczne, odporne na bugi i przede wszystkim poprawne i zgodne z nowymi trendami?

Przykład 1:

[HTML] pobierz, plaintext 
<div style="float:left; width:50%; height:90px; border:1px solid red;">blok 1</div>
<div style="float:left; width:50%; height:90px; border:1px solid red;">blok 2</div>
<div style="clear:both; height:0px;">&nbsp;</div>
[HTML] pobierz, plaintext 

Przykład 2:

[HTML] pobierz, plaintext 
<div style="display:table; width:100%;">
  <div style="display:table-row;">
    <div style="width:50%; height:90px; border:1px solid red; display:table-cell;">blok 1</div>
    <div style="width:50%; height:90px; border:1px solid red; display:table-cell;">blok 2</div>
   </div>
</div>
[HTML] pobierz, plaintext 

display: table = <table>

niczym się to nie różni przecież.

No ok jest jedna różnica, walidator jest na tyle głupi, że pomyśli, że nie robisz tego na tabelach i zaświeci na zielono, oraz jak ktoś nie zajrzy w CSS to też pomyśli, że jest to zrobione dobrze.

Jest jeszcze inna ważna różnica. Jak wiadomo tabele wykorzystywane są do danych tabelarycznych. A co z główną strukturą strony ? Lewa kolumna contentowa, sidebar jaka forma jest najlepsza ?

Różnica między <table>, a display:table jest duża, bo jeśli ktoś zajrzy w kod źródłowy i zobaczy wszystko na tabelkach to się przestraszy.

Co jeszcze myślicie o floatach vs. display table ? Jest jeszcze jakaś inna forma realizacji, osiągnięcia celu ?

[HTML] pobierz, plaintext 
<div style="display: table">A co to niby jest, jak nie tabela?</div> 
[HTML] pobierz, plaintext 

To tak jakby przykryć trupa kołdrą i powiedzieć, że to nie trup, tylko kołdra

@Damonsson: Jest bardzo duża różnica pomiędzy danymi tabelarycznymi, a formatowaniem elementów przy użyciu modelu tabelkowego. Dane tabelaryczne (<table />) reprezentują konkretną wartość/informację semantyczną, podczas gdy <div style="display: table" /> nie niesie za sobą żadnej informacji. Na dobrą sprawę jedno z drugim nie ma nic wspólnego.

@gecior: Dlaczego nie skorzystasz z display: inline-block?

Jakiś przykład zastosowania display:table dla nie(danych tabelarycznych)?

Chociażby ogólny szablon stron?

No teoretycznie ok, ale wg mnie to jest kompletnie pozbawione sensu. Ale to tylko mój pogląd na to i nie mówię, że jest dobry.

float definiuje oblewanie elementu np. obrazu względem tekstu i po to został wymyślony. To że ktoś wpadł na pomysł, aby tworzyć dzięki niemu szablon np. kolumn obok siebie, jest dzisiaj tak samo postrzelony jak budowa całej struktury na tabelach <table>



display:table ma tę przewagę iż nie potrzebuje dodatkowych elementów, aby obie kolumny były tej samej wysokości.

Mentalnie i tak będziemy w tym samym miejscu czy użyjemy <table> czy display:table.

No fakt, jednak to nie to samo.

Ok, czyli float:left; - nie
display:table; - też nie

display:inline-block - tak

Podczas testowania inline-block pojawił się problem z marginesami elementów liniowych. Nie rozumiem dlaczego, aby je zlikwidować, trzeba elementowi nadrzędnemu dodać font-size:0px; Przecież to jakiś absurd. Jakich niespodzianek można spodziewać się jeszcze pod FF, Opera, Chrome, IE8,9,10 ?

Przykład:

[HTML] pobierz, plaintext 
 
<div style="font-size:0px;">
 
<div style="display:inline-block; width:100px; height:100px; font-size:12px; border:1px solid red;">kol1</div>
<div style="display:inline-block; width:100px; height:100px; font-size:12px; border:1px solid red;">kol2</div>
 
</div>
 
[HTML] pobierz, plaintext 

Za bardzo kombinujesz. Używasz atrybutów które nie są do budowy szablonu przeznaczone. http://www.quirksmode.org/css/display.html#inlineblock
Zrób to na display:table ewnetualnie float jak nie potrzebujesz równych kolumn i po problemie.


Skoro używasz na elemencie stylu liniowego, to chyba oczywiste że pobierze on wartość rodzica w postaci wysokości linii. gdyby linia w pliku miała 0px to jak chciałbyś pisać?

dzięki !*! i reszta ekipy za odpowiedzi, czyli reasumując:

display:table; - można używać do tworznia struktury strony, jak i samej treści, jeśli potrzebujemy jednakowo długich kolumn

display:inline-block - służy do organizacji treści, jeśli potrzebujemy nadać szerokość bądź wysokość elementowi liniowemu, nie zaleca się stosowania do struktury całej strony

float:left; - standardowa opcja spotykana na setkach stron do budowy szablonu, dobra dla każdej przeglądarki

table - dane tabelaryczne

-------

!*! napisał że stosowanie floatów jest kiepskim pomysłem z uwagi na przeznaczenie, więc co jest optymalnym rozwiązaniem? Stosować floaty czy nie?

Tak, jeśli potrzebujesz wsparcia dla starszych przeglądarek. W innym wypadku nie widzę sensu, moim zdaniem jest to przydatne tylko i wyłącznie do manipulowania obiektem w tekście.
Zresztą nie ważne czego użyjesz, ważne aby to działało i było przejrzyste przy późniejszych modyfikacjach.

a jeśli nie potrzebuję wsparcia dla starszych przeglądarek, co wtedy? Powinienem używać display:table, czy inline-block ? Czy równie dobrze float:left ?

Sory, że męczę tak temat. Ale zaczynam dochodzić do wniosku że nie ma najlepszego rozwiązania do stworzenia całej struktury strony. Zawsze znajdą się głosy za, albo przeciw jakiemuś rozwiązaniu.

Albo display:table, albo float:left w zależności czego potrzebujesz. inline-block jest zupełnie do czego innego.

Nie wiem dlaczego palnąłem to display inline-block - jak już zauważono, kompletnie nie nadaje się ono tutaj.

Skorzystaj z floatów, jeżeli zależy Ci na różnej wysokości sąsiadujących elementów, bądź display: table[-row|-cell] jeżeli zależy Ci na zachowaniu takich samych wymiarów.

Display table jest fajne o tyle, że wyrównuje Ci text do middle komórki, w innych przypadkach musisz kombinować paddingami.
Ja jednak nadal używam float: left; i chyba sporo osób pewnie też, nie jest to ani błędne ani archaiczne, należy jednak pamiętać o dodaniu na końcu szablonu clear: both; aby reszta się nie rozjechała.

Zamiast bawić się paddingami, korzystaj z line-height i vertical-align. Znacznie elastyczniejsze rozwiązanie.
Bądź overflow hidden dla kontenera - nieco estetyczniejsze rozwiązanie.

[HTML] pobierz, plaintext 
		<div style="width: 50%; float: left; vertical-align: middle; line-height: 500%; background-color: red;">something left</div>
		<div style="width: 50%; float: left; vertical-align: middle; line-height: 500%; background-color: green;">something right<br />something else in right content</div>
[HTML] pobierz, plaintext 

line-height i vertical-align nie wiem czy jest elastyczniejsze, bo w takich przypadkach działa po prostu podobnie, nadal należy to po prostu to ustawić.
Co do overflow hidden dla parenta to nie używałem dla w tym kontexcie

Tylko co ma line-height do tworzenia głównej struktury szablonu? Nie idźmy w paranoje, to że coś działa nie znaczy że jest dobre.

Chodziło o wyrównanie textu, np. w buttonach. Musisz dokładnie czytać aby zacząć oceniać.

Temat odnosi się do budowy kolumn szablonu obok siebie, więc z tym buttonem zaszalałeś jak z wartością 500%.

Musisz dokładniej czytać, już ci pisałem.
Chodziło w tym wypadku o wyrównanie textu middle. Jak dokładnie się wczytasz to zrozumiesz.

I dlatego dałem Ci do zrozumienia że za bardzo nie wiesz do czego służą wartości których używasz. EOT.

Chyba strasznie chcesz mnie pogrążyć, a tak na prawdę sam nie wiesz o czym piszesz.
W jaki niby sposób dałeś mi do zrozumienia, że nie wiem do czego służą jak to określiłeś wartości, o których pisałem ?
W rzeczywistości pisałeś o zupełnie czym innym niż ja, bo temat posta zagłębił się trochę, a ty pisałeś bardzo ogólnie o kontenerach.
Teraz jednak temat schodzi już w ogóle na inny tor, bo próbujesz mi wmówić, że napisałem coś niepoprawnego.

Ok, to ja jeszcze raz zsumuje, najlepszym rozwiązaniem do budowy struktury szablonu są float:left; są divy oparte na % (aby ewentualnie strona działała na telefonach, była skalowalna). A co myślicie o tych procentach ? Co w zależnośći od wielkości okna będzie ? Odstępy itd. ? Twarde szerokości zawsze wiadomo, niezeskalują się, a procenty ? - kolumny będą nierówne w zależności od rozdzielczości.

Przykład:

[HTML] pobierz, plaintext 
 
<div style="width:100%; border:1px solid red; overflow:hidden;">
 
 <div style="float:left; width:49%; border:1px solid blue;">
  kolumna1
 </div>
 
 <div style="float:left; width:49%; border:1px solid gray;">
  kolumna2
  </div>
 
</div>
 
[HTML] pobierz, plaintext 

Co do borderów to masz rozwiązanie tutaj:
http://stackoverflow.com/questions/7207668...hin-another-div

Co do jakiś wyjątków to użyj sekcji @media dla css3

Dla urządzeń mobilnych używasz @media w css, osobny styl.