Dwie kolumny o jednakowej wysokości Opcje

[seen]

Mam taki kod:

CODE

<div style="width:200px;">
<div style="float:left; width:100px;"><br />
<br />
<br />
<br />
</div>


<div style="float:right; width:100px;">
</div>
</div>

w przykładzie zamiast tekstu w lewym divie wstawiłem znaki nowego wiersza.
Jak zrobić żeby prawy div miał taką samą wysokość jak lewy div (nie wypełniając go tekstem ani tagami <br>)?

[Crozin]

CSS: display: table[-row|-cell]

[seen]

zrobiłem tak:

CODE

<div style="width:200px;; display:table-row;">
<div style="float:left; width:100px; display:table-cell;">
<br />
<br />
<br />
<br />
</div>


<div style="float:right; width:100px; display:table-cell;">
</div>
</div>

i niestety nie działa.
Czy coś źle robię?

[Crozin]

Pozostawiłeś właściwość FLOAT.

PS. Nie jestem pewien czy nie powinieneś jeszcze całości objąć dodatkowym elementem z display: table;

[Sephirus]

@Crozin - dokładnie tak (IMG:style_emoticons/default/smile.gif)

Układ musi być:

[HTML] pobierz, plaintext 
<div style="display:table"> 
      <div style="display:table-cell">...</div>
      <div style="display:table-cell">...</div>
</div>
 
[HTML] pobierz, plaintext 

[seen]

dzięki, faktycznie działa.
A nie ma możliwości żeby dopasować wysokość diva do zewnętrznego diva?

[Skaras]

dzięki, faktycznie działa.
A nie ma możliwości żeby dopasować wysokość diva do zewnętrznego diva?

Możesz nadać wewnętrznemu divowi height na 100%.



Ten post edytował nospor 8.12.2011, 14:42:53

Powód edycji: [nospor]:

[croc]

Height 100% nie zadziała. Jedną ze sztuczek jest stosowanie tła z obu divów w jednym pliku, wtedy wysokość fizyczna poszczególnych nie ma znaczenia, bo tło dopasuje się do dłuższej.

[Skaras]

Height 100% nie zadziała. Jedną ze sztuczek jest stosowanie tła z obu divów w jednym pliku, wtedy wysokość fizyczna poszczególnych nie ma znaczenia, bo tło dopasuje się do dłuższej.

Może nie zrozumiałem pytania, ale gdy dam taki kod:

[HTML] pobierz, plaintext 
<div style="width: 500px; height: 500px; background: red">
	<div style="width: 200px; float: left; background: blue; height: 100%;"><br><br></div>
	<div style="width: 200px; float: right; background: green; height: 100%;"><br><br><br><br></div>
</div>
[HTML] pobierz, plaintext 

To niezależnie od ilości tekstu w obu divach rozciągają się na całą wysokość rodzica.


Ten post edytował nospor 8.12.2011, 14:42:22

Powód edycji: [nospor]:

[Damonsson]

@up Jeśli masz ustaloną wysokość dla kontenera to pewnie, gorzej jeśli jej nie masz (IMG:style_emoticons/default/wink.gif)

Temat przewijający się kilka razy w tygodniu na forum, przeszukaj moje wszystkie posty z "pomógł" to znajdziesz rozwiązanie.

Możesz też poszukać pod magicznym słowem "Faux Columns".

[croc]

Nawet nie wiedziałem, że ten sposób się tak nazywa. (IMG:style_emoticons/default/smile.gif)

A swoją drogą to czy jest jakieś wytłumaczenie dlaczego elementy nie chcą się rozciągać do wysokości innego elementu, którego wysokość jest ustalona automatycznie przez zawartość?