[Resolvido] Layout liquido, problema com ultima coluna

[Davicamarinha 0]

Bom dia a todos.

 

Eu fiz um site aonde o corpo tem 3 coluna. A primeira é uma coluna de tamanho fixo, a do meio é variavel (ou liquida) e a ultima fixa. Na minha resolução de 1920x1080, a ultima coluna aparece normalmente aonde tem que estar, mas em resoluções menores, ela desce e fica embaixo de tudo. Queria que ela ficasse fixa la, mesmo que fique escondida e independente da resolução do monitor. Ja tentei com o position absolute, mas como a coluna do meio tem o width variavel, nao funciona.

[Bru_ce 53]

Posta o site, fica difícil te ajudar sem ver algo. :thumbsup:

[Davicamarinha 0]

O site é esse: http://rabbitinfo.com.br/loja/

[Bru_ce 53]

Tente utilizar POSITION,

[Davicamarinha 0]

Tente utilizar POSITION,

 

Já utilizei o position, e nao de certo.

[Bru_ce 53]

Tente utilizar isso e configure conforme precisa.

Arrume o margin-left e o top ! :thumbsup:

 

#suaDiv {
   left: 50%;
   top:110px;
   margin-left: -490px;
   position: absolute;
}

 

* Não se esqueça de colocar sua width / height !

[Davicamarinha 0]

Nao funcionou, a 3ª div ainda esta sobrepondo as outras, e eu preciso q ela fique fixa do lado direito, mesmo que a resolução do monitor seja menor que o tamanho do site.

[angelorubin 142]

Boa tarde,

 

Talvez isso lhe ajude - layout de 3 colunas (laterais fixas e coluna central fluida)

[Davicamarinha 0]

Eu corri aqui por fora e nem vi a resposta ai em cima, bom... aqui vai a minha solução.

 

<div id="pai" style="background-color:#0F0; width:100%; overflow:hidden;">
<div id="filho1" style="background-color:#F00; padding:0 0 0 200px;">
   	<div id="neto1" style="background-color:#00F; float:right; width:100%;">
       	<div id="bisneto1" style="background-color:#FF0; padding:0 0 0 200px;">
           	      <div id="trineto1" style="background-color:#F0F; float:left; margin:0 0 0 -200px; width:100%">teste</div>
                     <div id="trineto2" style="background-color:#0FF; float:right; width:150px;">teste</div>
           </div>
       </div>
       <div id="neto2" style="background-color:#999; float:left; margin:0 0 0 -200px; width:190px;">teste2</div>
   </div>
</div>