Layout 3 colunas - IE x FF

[Rodrigo Miss 1]

Boa tarde pessoal, tava fazendo uns testes aqui, pra montar um layout de 3 colunas, no code abaixo, ele sai perfeitamente como eu quero no ff mais no i.e ele sai com medidas incorretas, as divs "encolhem" ....

segue a folha de estilos :

 

<style type="text/css">#geral {	width:100%;}#left {	position:absolute;	top:5px;	font:13px Monospace;	color:#555;	border:1px solid #ccc;	padding:4px;	width:25%;	left:5px;	}#right {	position:absolute;	top:5px;	font:13px Monospace;	color:#555;	border:1px solid #ccc;	padding:4px;	width:25%;	right:5px;}#center {	position:absolute;	top:5px;	font:13px Monospace;	color:#555;	border:1px solid #ccc;	padding:4px;	width:43.5%;	left:27.5%;}	</style>

Alguma dica de como resolver esse problema ?

[Guilherme Rambo 4]

Não pode nos mandar um link pra visualizar o problema?[]'s

[Rodrigo Miss 1]

Opa! Claro #INSIDE# ...

 

Aki

[Guilherme Rambo 4]

Formulei um CSS todo novo para esse seu teste, experimente:

#geral {width:100%;display:table;height:auto;font:13px 'Trebuchet MS', helvetica, sans-serif;color:#655665;}#geral div {padding:2px}div#left {width:25%;float:left;border:1px solid #eee;}div#center {border:1px solid #eee;width:45%;float:left;margin:0 0 0 16px;}div#right {width:25%;float:right;border:1px solid #eee;}

Este está mais de acordo, sem utilização de position desnecessário, não sei se funciona perfeito em todos os browsers, mas teste.

 

Qualquer coisa temos ótimos exemplos na área de laboratório de scripts aqui no fórum de WS

 

[]'s

[Rodrigo Miss 1]

Bom dia kra... vlw aew pela resposta...fiz da forma q você me passo aki, so q funciona direito no FF, mais no IE a div do centro encolhe ... faça o teste aew ...não teria como deixar esta div do centro como width automatico,,, ??? pra preencher o espaço vago?

[André do Vale 76]

<style type="text/css">#geral {	font: 13px 'Trebuchet MS';	color: #666666;	}#esquerda {	float: left;	width: 25%;	background: #e5e5e5;	border: 1px solid #333;	}#direita {	float: right;	width: 25%;	background: #e5e5e5;	border: 1px solid #333;	}#central {	float: left;	width: 45%;	background: #e5e5e5;	border: 1px solid #333;/*	margin: 0 2.3% 0 2.3%; essa medida funciona no safari */	margin: 0 2.2% 0 2.2%; /* essa medida funciona no FF */	*margin: 0 2.5% 0 2.5%; /* essa medida funciona no IE7 e IE6 */	}</style>

resumido (só diferente hehe)

 

<style type="text/css">#geral {	font: 13px 'Trebuchet MS';	color: #666666;	}#esquerda,#direita {	width: 25%;	}#esquerda, #central {	float: left;	}#direita {	float: right;	}#central {	width: 45%;/*  margin: 0 2.3% 0 2.3%; essa medida funciona no safari */	margin: 0 2.2% 0 2.2%; /* essa medida funciona no FF */	*margin: 0 2.5% 0 2.5%; /* essa medida funciona no IE7 e IE6 */	}#esquerda,#direita,#central {	background: #e5e5e5;	border: 1px solid #333;	}</style>

 

ve se funfa ;)

[Rodrigo Miss 1]

é kra ... funfo msm heheh .. vlw aew pela ajuda #INSIDE# e Alkaeda ...so uma pergunta ...o "operador * " define q a propriedade sera somente valida pra IE ????e sem o "*" é valido pra todos os navegadores isso???

[Guilherme Rambo 4]

O * não é um operador, ele é um caractere que colocado na frente de uma propriedade css será lido apenas pelos IE's, e não por outros browsers. Essa prática é chamada de CSS Hacks, pesquise mais sobre isso[]'s

[Rodrigo Miss 1]

Otimo kra ... vlw pela sua explicacao... abç