height ajustavel

[Miguel Rocha1 0]

Boa Noite,

 

Caros amigos, venho por este meio pedir a vossa ajuda, para um problema que me surgiu, ja procurei no google,e nao encontrei, ( quando uma pessoa nao sabe o que se passa ao certo, pode ter muita coisa no google, que nao encontra o que pretende )...

 

Ora bem, o que eu pretendo, e o que se encontra nas imagens abaixo..

 

 

 

A div azul, ficar debaixo da amarela, independentemente do tamanho da rosa..

 

Desde de ja, obrigado pela ajuda.

[Aender 3]

Mas o que você quer afinal ? dá para explicar melhor ?

[Willian Makoto 6]

eeae ;D

 

vou te dar a barbada:

 

<style>
#coluna_esq{
	width:200px;
	height:auto;
	float:left
}
#coluna_dir{
	width:300px;
	height:auto;
	float:left
}
#div_amarela{
	width:100%;
	height:auto;
	float:left;
	background:#FFFF00;
}
#div_azul{
	width:100%;
	height:auto;
	float:left;
	background:#0066FF;
}
#div_rosa{
	width:100%;
	height:auto;
	float:left;
	background:#CC66FF;
}
</style>

<div id="coluna_esq">
<div id="div_amarela">
   Lorem ipsum dolor sit amet, nullam sed duis proin elit, posuere quam sodales maecenas vivamus pharetra eu, morbi vestibulum a nulla, quis feugiat, mauris sed nec sed curabitur. Et non, sit scelerisque id congue amet placerat vitae, cras ultrices mauris, tristique cras cum erat ultricies fringilla. Pede amet, facilisis odio quis, wisi elementum amet bibendum vivamus. Scelerisque feugiat. Vel egestas sit, lacus ratione justo donec est, arcu libero in vivamus mi, a sit, quis risus mi sociis, facilisis sit donec nibh.
   </div>
<div id="div_azul">
Lorem ipsum dolor sit amet,
   </div>
</div>
<div id="coluna_dir">
<div id="div_rosa">
       Lorem ipsum dolor sit amet, nullam sed duis proin elit, posuere quam sodales maecenas vivamus pharetra eu, morbi vestibulum a nulla, quis feugiat, mauris sed nec sed curabitur. Et non, sit scelerisque id congue amet placerat vitae, cras ultrices mauris, tristique cras cum erat ultricies fringilla. Pede amet, facilisis odio quis, wisi elementum amet bibendum vivamus. Scelerisque feugiat. Vel egestas sit, lacus ratione justo donec est, arcu libero in vivamus mi, enim quis risus libero quis odio. Quos pellentesque sed pellentesque velit nulla fringilla. Est id elit bibendum posuere tincidunt leo, lacus donec tellus egestas turpis, donec vehicula amet integer nascetur nec mauris, erat felis ante imperdiet nec. Pede viverra, cras nunc, in aenean fermentum. Ipsum id cum felis at porttitor integer. Non magna sit, quis risus mi sociis, facilisis sit donec nibh.    Lorem ipsum dolor sit amet, nullam sed duis proin elit, posuere quam sodales maecenas vivamus pharetra eu, morbi vestibulum a nulla, quis feugiat, mauris sed nec sed curabitur. Et non, sit scelerisque id congue amet placerat vitae, cras ultrices mauris, tristique cras cum erat ultricies fringilla. Pede amet, facilisis odio quis, wisi elementum amet bibendum vivamus. Scelerisque feugiat. Vel egestas sit, lacus ratione justo donec est, arcu libero in vivamus mi, enim quis risus libero quis odio. Quos pellentesque sed pellentesque velit nulla fringilla. Est id elit bibendum posuere tincidunt leo, lacus donec tellus egestas turpis, donec vehicula amet integer nascetur nec mauris, erat felis ante imperdiet nec. Pede viverra, cras nunc, in aenean fermentum. Ipsum id cum felis at porttitor integer. Non magna sit, quis risus mi sociis, facilisis sit donec nibh.
   </div>
</div>

 

 

copie e cole no seu html.

 

veja que eu separei em 2 "colunas", assim fica mais simples, pois a div amarela e a azul ficaram na juntos separados da div rosa.

 

espero ter ajudado, abç!

 

 

* não se esqueça do [+1] kkk'