problema aliniere DIV pe verticala

Am 2 DIV-uri, unul Left si unul Right. Vreau ca in cel din dreapta sa pun o caseta de text, pe care sa o aliniez BOTTOM, iar deasupra sa ramana spatiu alb. Nu stiu cat este inaltimea acestei casete de text (poate doar s-o aproximez; textul este variabil ca lungime). Am incercat cu vertical-align: bottom si cu height procentual, dar nu iese. Am facut si un desen sa se inteleaga mai bine:
 problema_div.jpg   9.51K   72 downloads

Alta_, on May 12 2008, 17:52, said:

#right {
float: right;
position abolute;
bottom: 0;
}

Dar sa nu uiti sa pui la div-ul care le contine min-height: 100%.

Edited by neobluenet, 12 May 2008 - 20:45.

neobluenet, on May 12 2008, 20:44, said:

Am incercat, tot nu merge...poate mai trebuie sa completez cu ceva, nu stiu...iata pe scurt cum am scris pana acum:

fisier.htm said:

fisier.css said:

Asa le deseneaza una langa alta, dar divRight il aliniaza la marginea de sus.

Daca pun #divRight {position: absolute; bottom:0}, #fundal {min-height:100%}, divRight se duce sub divLeft.

@neo: poate ne explici ce cauta float si position:absolute in aceeasi declaratie? position:absolute invalideaza float pt simplul motiv ca position:absolute scoate din flow elementul.

@alta: solutia care poate merge este de fapt un mic trick ce foloseste tot pozitia absoluta:

<div class="container">
	some text here
	<div class="to-align">testing</div>
</div>

div-ul cu clasa to-align il pui cu pozitie absoluta si in afara div-ului container astfel incat sa para ca e aliniat bottom. Div-ul cu clasa container trebuie sa aiba pozitie relativa neaparat.

Iti fac un demo acum. si il atasez cand e gata.

Am atasat si demo-ul.

@neo: inainte sa scrii ceva sau sa dai un sfat eronat, te-as ruga sa te documentezi. nu de alta dar pui oamenii pe cai gresite.
@alta: ce am oferit eu nu e neaparat o solutie, ci mai degraba o pacaleala [nu am aplicat-o niciodata pana acum]. e cumva la fel ca equal-height-columns din imagini de background. Pana la urma conteaza ce vede userul nu?

@alta PS: vezi ca dimensiunile procentuale utilizate in div-ul outside sunt relative la div-ul container. Adica 105% din div-ul container = 105% din 30% din pagina ta normala. sper ca am explicat pe inteles. Daca folosesti dimensiuni absolute (pixeli) nu o sa mai ai problema asta.

Edited by xnoise, 12 May 2008 - 22:56.

xnoise, on May 12 2008, 22:47, said:

Multumesc frumos!   Cu siguranta nu-mi dadea prin cap asa ceva. Incerc sa trec de la TABLES la DIVS si vad ca nu e chiar simplu.
Tot ce am putut eu sa fac, a fost sa pun in DivRight, doua div-uri suprapuse (divRightUp, divRightDwn) si sa le dau height procentual. Dar nu era o solutie buna atat timp cat nu stiam, cat de mult se poate inalta div-ul de jos (datorita textului inclus).

toate trick-urile astea vin cu experienta. Nu cred ca o sa le gasesti in vreun manual sau ceva. CSS-ul iti impune niste limite vagi, dar de cele mai multe ori cunoasterea teoriei duce la solutii neasteptate la probleme ciudate [asta pt ca problema ta nu este una obisnuita].

Cu placere.

salut,
mi-am permis sa continui acest topic intrucat problema peste care am dat eu este asemanatoare oarecum.Am acel #content in interiorul caruia am in .inner-comntent , un left_bar_2 si un .main-content .
As vrea ca acea poza din left_bar_2 sa fie lipita de bottom pentru ca acesta se continua,acel div este in design oarecum lipit de bottom.Daca .main-content impinge in jos bottom-ul,bara din stanga ramane la dimensiunea ei si poza ramane cumva in are ca si cand ar fi rupta din bottom.as vrea sa stea cumva lipita de bottom si sa se lungeasca la fel cu .main-content-ul, asa cum se vede in poza.Daca aveti vreo idee sau un sfat...astept.va multumesc

dwhite, on Jan 19 2009, 00:07, said:

din pacate divurile nu stiu de 100% dupa cum ai observat... uite incearca urmatoarea varianta:

1 div mare latime cat contentul cu background aliniat la stanga repetitiv pe verticala care sa contina poza de la left_bar_2
in interiorul lui pui un div aliniat stanga cu contact si news si un div aliniat dreapta cu continutul propriuzis

astfel marind continutul oricarui dintre cele 2 divuri interioare va creste inaltimea divului si aceasta va creste implicit si divul mare care contine fundalul din stanga

sper ca m-am facut inteles, mi-e lene sa fac un exemplu

Nu am prea inteles ce vrei sa spui )) am incercat in cateva feluri dar nu se potrivea nicicum,poate si pentru ca am folosit margin: 0px auto; iar in interior am pus div-uri cu float: left...am incercat sa pun sub afara din .inner-content un div tot cu margin : 0px auto; si in el sa aliniez coloana stanga exact poza intr-un div pentru ca .inner-content-ul sa il impinga in jos si mergea dar ramanea un spatiu pe toata linia orizontala a inner-contentului si arata urat...(spatiu nefolosit.)am schimbat din design si merge si asa,totusi daca aveti o alta rezolvare as fi curios ca m`am gandit mult si m`am chinuit )
multumesc

<html>
<head>
<style>
#page {margin:auto;width:980px}
#header {border:1px solid #000;background-color:#abc;float:left;width:980px}
#content_left {border:1px solid #000;background-color:#eee;float: left;width:980px}
#left {border:1px solid #000;float:left;width:170px}
#content {border:1px solid #000;background-color:#aaf;float:right;width:800px}
</style>
</head>
<body>
<div id="page">
	<div id="header">header</div>
	<div id="content_left">
		<div id="left">left</div>
		<div id="content">content<br>content<br>content<br>content<br>content<br></div>
	</div>
</div>
</body>
</html>

pe #content_left pune-ti poza de fundal aliniata la stanga cu repetitie pe y

multumesc mult denverash.chiar nu m-am gandit rezolvarea asta   m-am cam chinuit sa caut tot felul de rezolvari,dar la asta nu...am mai prins o idee,10x inca o data.