[HTML+CSS] rozciąganie DIVa Opcje

[aladin07]

[HTML] pobierz, plaintext 
<div id="wrapper">
<div id="kolumna_a">
  <div id="blok_1"></div>
  <div id="blok_2"></div>
</div>
<div id="kolumna_b">
  <div id="blok_3"></div>
  <div id="blok_4"></div>
</div>
<div id="kolumna_c">
  <div id="text">lorem ipsum</div>
</div>
</div>
[HTML] pobierz, plaintext 

i do tego css

[HTML] pobierz, plaintext 
div#wrapper{
overflow: hidden;
display: table;
background-image: url(obrazek_tla);
background-repeat: repeat-y;
}
div#kolumna_a, div#kolumna_b, div#kolumna_c{
display: table-cell;
}
div#blok_1{
background-image: url(obrazek_1);
}
div#blok_2{
background-image: url(obrazek_2);
}
div#blok_3{
background-image: url(obrazek_3);
}
div#blok_4{
background-image: url(obrazek_4);
}
[HTML] pobierz, plaintext 

potrzebuje uzyskac efekt samorozcigajacego sie div'a wrapper pod wzgledem ilosci tekstu w div'ie text
z tym jednak zalozeniem, ze kiedy zawartosc div'u text bedzie wieksza niz wysokosc obrazek_1 i obrazek_2
to zeby rozciagniecie div'u kolumna_1 powodowalo, ze obrazek_1 bedzie sie pozycjonowal u gory
div'a kolumna_1, a obrazek_2 pozycjonowal sie na samym dole div'a kolumna_1, a pomiedzy nimi bedzie
sie powtarzal obrazek_tla z div'a wrapper
podobnie sytuacja wyglada dla kolumna_2 i obrazek_3 i obrazek_4
przy obecnym zapisie div wrapper rozciaga sie pod wplywem wiekszej ilosci tresci ale zarowno obrazek_1 i obrazek_2
w kolumna_1 oraz obrazek_3 i obrazek_4 w kolumna_2 pozycjonuja sie do gory swoich kolumn

jak i czy mozna zrobic aby te obrazki ustawialy sie po przeciwstawnych stronach swoich div'ow?

dodam ze na razie to rozwiazanie dziala tylko dla FF w IE jeszcze sie sypie wiec moze jeszcze inaczej
nalezaloby to zbudowac?

[Pilsener]

Poczytaj w kursie o backround-position, możesz zarówno wyrównać tło dla lewej/prawej góry/dół jak i ustawić jego położenie w pikselach.

[aladin07]

ale tu nie problemem jest samo tlo (chyba ze zle zrozumialem intencje Twojej odpowiedzi)
chodzi o to by div'y odpowiednio sie rozmiescily wewnatrz kolumny 1 i 2 a w zaleznosci od wielkosci
tresci w kolumnie 3
i nie wiem czy to jest w ogole wykonalne

[Pilsener]

Niestety nie jest - możesz spróbować zrobić to ewentualnie nakładając JS, który zmierzy wysokość obiektu i ustawi w zależności od tego klasę/styl innego obiektu (o ile da się coś takiego zrobić w JS, bo nie jestem ekspertem od tej technologii).

[aladin07]

jedyne rozwiazanie ktore teraz przyszlo mi do glowy i dziala na FF
to (pozwole sobie to pogrubic i dac bez znacznika html):

css :
body{
position: absolute;
}
div#wrapper{
overflow: hidden;
display: table;
background-image: url(obrazek_tla);
background-repeat: repeat-y;
}
div#kolumna_a, div#kolumna_b, div#kolumna_c{
display: table-cell;
}
div#blok_1{
background-image: url(obrazek_1);
}
div#blok_2{
background-image: url(obrazek_2);
position: absolute;
bottom: 0px;
}
div#blok_3{
background-image: url(obrazek_3);
}
div#blok_4{
background-image: url(obrazek_4);
position: absolute;
bottom: 0px;
}


nie wiem czy jest to rozwiazanie "ladne" i dobre
ale dla FF mi dziala wiec pewnie i IE bedzie mozna pokonac
czy macie jeszcze inny pomysl na to?