DIV Inteligente

1. DIV Inteligente

engos
(usa openSUSE)

Enviado em 11/02/2011 - 18:24h

Tenho um código que estou tentando mudar para tableless, basicamente ele é assim (considere todas as margins e paddings como 0):

<html>
<table border=0px>
<tr>
<td width=200px> menu </td>
<td width=100%> textos </td>
<td width=200px> imagens </td>
</tr>
</table>
</html>

Com isso garanto que idependente da resolução do navegador, os td´s laterais vão sempre estar com tamanho fixo, enquanto que o central vai ser quem varia (tipo a página principal do VOL).

Mudando para DIV´s encontrei um problema, a DIV central nunca fica certa.

Tentei usar as DIV´s com float, mas como só tenho o tamanho das laterais, tentei usar nelas fixo e na central width=100%, como em tabelas, mas ela fica com o tamanho total da largura da tela ao invés de respeitar as outras, empurrando assim a div da direita para baixo.

Tentei mixar entre posições relativas e absolutas, incluindo DIV´s intermediárias, ao redor etc e nada, sempre ao redimensionar a tela acabo com problemas, por exemplo, a DIV central empurra a da direita para baixo, ou fica com largura curta demais e não preencha 100% do espaço entre as DIV´s laterais.

O objetivo é fazer com que o site se comporte parecido com o do VOL, onde ao redimensionar somente o centro é redimensionado e as laterais se mantem fixa, mas as diferenças são:

- a DIV central tem que ocupar 100% do espaço entre as DIV´s laterais, como no código em tabela.
- Quando a resolução for pequena demais, quero que a DIV do centro fique em um z-index que a deixe por cima das outras DIV´s (um dos principais motivos que está me fazendo mudar para tableless).

Alguém tem idéia de como se fazer isso de forma bem limpa e prática?

0 0

Quote