3 divy - height zależy od ilości tekstu

[Fibi]

mam pytanie, jak ustawić, by divy były zależne od siebie?
ma to tak wyglądać:
* złóżmy,że mamy divy 1, 2 i 3.
* mają się wyświetlać koło siebie (tj. 1 2 3)
* w divie 2 nie ma tekstu w ogóle.
* w jednej podstronie, w divie 1 jest tekstu na 3 linijki,a w divie 3 jest 1 linijka tekstu, to wysokość jest jak w divie 1.
* w drugiej podstronie, w divie 3 jest tekstu na 5 linijek,a w divie 1 są 3 linijki tekstu, to wysokość jest jak w divie 3.
* i przy tym, by div 2 się też wyrównywał (tj. height najwyższego (?) diva)


danie height: auto jest ok, ale nie uwzględnia przy tym innych divów. jak dam 100% to jest średnio, bo to jest 100% wysokości okna i trochę kicha. (zależne od rozdziałki)

da się jakoś uwarunkować te 3 divy?

[DoGeR]

div(auto)
-div1(100%)
-div2(100%)
-div3(100%)

div1,2,3 umieść w divie i ustaw wysokości jak powyżej, powinno zadziałać

[Fibi]

niezbyt.
żeby zrobić 3 divy koło siebie, trzeba (chyba?) zrobić tak:
php:
<div=1>
<div=1.1></div>
<div=1.2></div>
</div>
<div=2></div>

a w css
#1 { float: left; }
#1.1 { float: left; }
#1.2 { float: right; }
#2 { float: right; }

żeby był koło siebie.
a jak się da tylko
<div=1>
<div=1.1></div>
<div=1.2></div>
<div=1.3></div>
</div>
to nie wyświetlają się koło siebie.

[DoGeR]

Kod:

<div=1>
<div=1.1></div>
<div=1.2></div>
<div=1.3></div>
</div>

Kod:

#1 { height: auto; }
#1.1 { float: left; height: 100%; }
#1.2 { float: left; height: 100%; }
#1.3 { height: 100%; }

Wyświetla 3 divy obok siebie

[Fibi]

zrobiłem jak napisałeś i wyszło tak:
div 1.1 jest ok
div 1.2 jest pod 1.1 (w pionie)
div 1.3 jest pod 1.1 (jeden na drugim)

[DoGeR]

Żeby nie było nieporozumień

Kod:

<div id="container">
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</div>

Kod:

#container { height: auto; }
#first { float: left; height: 100%; }
#second { float: left; height: 100%; }
#third { height: 100%; }

U mnie wyświetla poprawnie

[Fibi]

mam tak:

Kod:

#left {  height: auto;  width: 800px;}
#lewa {  height: 100%;  width: 225px;  float: left;  clear: left;  background: #bcd956;}
#belka {  height: 100%;  width: 13px;  float: left;  clear: left;  background: #def883;}
#main {  height: 100%;  width: 562px;  background: #bcd956;}

Kod:

<div id="left">
            <div id="lewa">treść</div>
            <div id="belka"></div>
            <div id="main">treść</div>
        </div>

i się nie zmienia wysokość to raz, a dwa nie widać w ogóle "belki" (diva 2).

[DoGeR]

W takim razie ja się poddaje :]

[Labsta.com]

Możesz użyć tabel CSS, ale to słaby pomysł.
Ja zwykle używam faux column: http://www.alistapart.com/articles/fauxcolumns/
A tu masz gotowe rozwiązania: http://www.code-sucks.com/css%20layouts/faux-css-layouts/ wystarczy wybrać opcje

[T.Novi]

użyj <br class="czyszczenie" />
XHTML:
<div>
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
<br class="czyszczenie" />
</div>
CSS:
br.czyszczenie {
clear: both;
}
tylko dobrze przelicz width, suma trzech divów nie może być większa od tego w którym się znajdują