Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Zaphod

Problema com DIVs

Por , em Desenvolvimento frontend

Recommended Posts

Zaphod    0

Zaphod
Postado

Galera, tô com um problema aqui e até agora não consegui achar uma solução para ele. Vou tentar explicar:

 

Quando a pessoal for minimizando o navegador, as DIVs devem "cair", mas a DIV mais a direita deve ficar no topo quando houver uma só coluna. Fiz uns desenhos tentando explicar.

 

Situação com o site Maximizado (não necessariamente maximizado, mas com área suficiente para visualizar as 3 DIVs)

 

Imagem Postada

 

Situação quando o usuário diminui o tamanho da janela. A DIV #2 cai para baixo da DIV #1, mas a DIV #3 deve permanecer à direita

 

Imagem Postada

 

Situação em que o usuário diminui ainda mais o tamanho da janela. E só há espaço para visualizar somente uma DIV. A DIV #1 (juntamente com a DIV #2) cai para baixo da DIV #3

 

Imagem Postada

 

 

Alguém tem alguma luz para isso? Tenho que usar o máximo de CSS possível para isso. Na verdade teria que ser CCS Only, mas se tiver alguma coisa a mais não tem problema.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Zaphod    0

Zaphod
Postado

Isso não adianta. O problema não é fazer com que elas fiquem uma ambaixo das outras, isso é fácil. O problema é manter a DIV #3 sempre à direita, enquanto as outras caem e na situção extrema 3, ela fica no topo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

FelipeMorais    0

FelipeMorais
Postado

Cara, ve se é isso que você quer.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>Teste de modularização de bloco - Imasters Fóruns</title><meta name="Generator" content="EditPlus"><style>div{	height:100px;	width:100px;}#bloco3{	background:blue;	float:right;}#bloco2{background:red;}#bloco1{	background:green;	float:left;}</style></head><body><div id="bloco3">3</div><div id="bloco1">1</div><div id="bloco2">2</div></body></html>

O conteúdo da div 3 precisa vir primeiro no html, o que não é impactante já que é o conteúdo mais importante pra você.

para que ela fique no lugar onde você deseja, atribua a propriedade float:right nela.

 

Sguindo de float:left na div seguinte, a terceira div automaticamente se posiciona no lugar desejado.

 

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Zaphod    0

Zaphod
Postado

FelipeMorais,

 

É quase isso. Eu já havia feito isso, mas ese código tem 2 problemas (para o que eu quero):

 

1) a DIV #3 fica isolada à direita quando a janela é maximizada; ela deveria ficar junto a DIV #1

2) eu esqueci de dizer, mas além disso, as DIVs devem "esticar" de acordo com o tamanho da janela. Creio que isso seja fácil resolver

 

É meio complicado o que tenho que fazer, certamente envolva javascript e expression no CSS. Não estou preocupado com compatibilidade, pois a aplicação é somente para IE 5.5 +, então não tem importância as incompatibilidades com outros browsers.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito