Ir para conteúdo

POWERED BY:

Arquivado

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

Eddy Goulart

Divs alturas iguais

Por , em Desenvolvimento frontend

Recommended Posts

Eddy Goulart    2

Eddy Goulart
Postado

AE galera.. estou tentando fazer isso a 2 dias já.. deixar as Divs do laterias ficar do mesmo tamanho que dá do meio..

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Teste</title><style type="text/css"><!--body {	margin: 0;	padding: 0;	min-width: 740px;	text-align: center;	min-height: 100%;}#container {	background: #FFFFFF;	text-align: left;}#header {	background: #999999;}#sidebar1 {	float: left;	width: 17%;		min-width: 130px;	background: #CCCCCC;}#sidebar2 {	float: right;	width: 17%;	min-width: 130px;	background: #CCCCCC;	}#mainContent {	margin: 0 17% 0 17%;		/*top - rigth - bottom - left*/	}#footer {	background:#999999;	clear:both;}--></style></head><body><div id="container">  <div id="header">header</div>  <div id="sidebar1">sidebar1</div>  <div id="sidebar2">sidebar2</div>  <div id="mainContent">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>  <div id="footer">footer</div></div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,Qual o problema do seu código..?Pareceu-me tudo correcto.Cumps \o/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eddy Goulart    2

Eddy Goulart
Postado

tipo.. abrisse ai né? eu queria que as cores das divs laterais acompanhe o tamanho da div central... entende? independendo do que vou botar no meu texto na div central.:S help?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eddy Goulart    2

Eddy Goulart
Postado

nao é bem isso..Só quero que quando eu botar um texto 'grande ou pequeno' na div central.. as divs laterais fiquem do mesmo tamanho que a div central está! ;(

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ricardo Lima (Aram)    0

Ricardo Lima (Aram)
Postado

Também adoraria saber a solução disso. Era algo que se conseguia fácil fácil com as tabelas.... Bom, eu sei que estamos fugindo um pouco do assunto, mas por que você quer que os divs com floats left e right sejam do mesmo tamanho que o div principal??? Talvez podemos fazer algo em css que solucione o seu problema.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

as divs laterais fiquem do mesmo tamanho que a div central

Se a técnica Faux Columns não é útil nessa situação, então a única sugestão que eu teria seria especificar a altura dessas divs (height)... Porque é assim: se não tiver conteúdo, o tamanho da div não vai aumentar, tenha certeza disso... Agora, se você quer que essa altura seja igual à da div do meio, se você não especificar uma mesma altura como falei para as 3 divs, somente com o Faux mesmo...

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Técnica "Faux Columns" para layouts CSS

 

Qualquer coisa, volte a postar! Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eddy Goulart    2

Eddy Goulart
Postado

Ricardo Lima quero saber para aprender.. é mais facil deixara assim em um site.. para nao precisar depois ficar trocando o tamanho da height das divs left e rigth.. =/vamos tentar solucionar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eddy Goulart    2

Eddy Goulart
Postado

Paulo.. pelo que eu entendi essa técnica bóta uma imagem no fundo né? mais o meu site é com a pagina em 100%.. e o minimo dela é de 130 nas pontas e 740 na principal.. entao nao possso botar isso.. pois o layout vai se submeter te acordo com a tela do usuario..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ricardo Lima (Aram)    0

Ricardo Lima (Aram)
Postado

Bom... a resposta é uma só. Não existe solução tableless para esse problema. Se vocÊ quer divs com tamanhos iguais, infelizmente é tabela mesmo. Eu acho a solução faux columns muito ruim, pois não adianta nada no caso do usuário querer alterar a largura da tela...<table><tr><td>coluna1</td><td>coluna2</td><td>coluna3</td></tr></table>formate a tabela no css pelo menos :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Vixi... Essa é uma "discussão" que vai looooonge se dermos muita corda... E assim: não tem solução 100% webstandard! Infelizmente! Quando escrevi aquele material que indique sobre Faux eu até tentei vasculhar a web em busca de uma solução 100% confiável, mas infelizmente não temos... Boa parte dos problemas seriam resolvidos caso a propriedade display: table funcionasse bem no FF...

 

Mas é uma questão que para mim não foi resolvida... Vide tópico antigo do nosso amigo micox: Aposentadoria do Faux-columns...

 

Eu até hoje não encontrei uma solução confiável... Alguém mais se habilita a falar sobre isso? Mas não vale só "criticar", tem que mostrar uma solução válida...

 

http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Bem, se você precisa REALMENTE disso usa as tabelas, pois eu também não conheço solução...O que eu costumo fazer às vezes é já projetar o design pensando nesses problemas, mas se o negócio tá feito e tem que resolver, fazer o que né...Se você precisa resolver esse problema, e o resto do site é todo nos padrões, acredito que não será uma grande perda fazer, sei lá, 10% do site abrindo mão de semântica[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Pois é #INSIDE#, muitas vezes temos que fazer da maneira "errada" certas coisas para poder solucionar alguns problemas... Tomara que com a nova versão do CSS e com uma adesão boa dos browsers essas e outras coisetas sejam solucionadas...

 

Mas é isso a e... Como dito: se não tem jeito, o negócio então é "apelar"...

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Eu uso uma solução que até hoje não tive problemas:

 

Testei no IE6, IE7, FF, Opera.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 	 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Colunas</title> <style type="text/css"> <!-- body {    margin: 0px;    padding: 0px;    color: #FFFFFF;    font-family: tahoma, arial, serif;    font-size: 11px;    text-align: center; } #container {	display: table;	margin: auto; 	width: 120px; } #container div { 	display: table-cell;	margin: 0px; 	padding: 0px; 	width: 40px; } .one {	background-color: #306090; }.two {	background-color: #906030; }.three {	background-color: #606060; }--> </style> <!--[if IE]> <style type="text/css"> #container {   overflow: hidden;}#container div{	float: left; 	margin-bottom: -10000px; 	padding-bottom: 10000px;} </style> <![endif]--></head> <body><input type="button" value="add" onclick="document.getElementById('t').innerHTML +='tres<br />tres<br />tres<br />tres<br />tres<br />tres<br />tres<br />tres<br />tres<br />';" />    <div id="container"> 	  <div class="one"> 		 um<br /> 		 um<br /> 		 um<br /> 		 um<br /> 		 um<br /> 		 um<br /> 		 um<br /> 		 um<br /> 	   </div> 	   <div class="two"> 		 dois<br /> 		 dois<br /> 		 dois<br /> 		 dois<br /> 		 dois<br /> 		 dois<br /> 		 dois<br /> 		 dois<br /> 		 dois<br /> 		 dois<br />				 dois<br /> 		 dois<br /> 	   </div> 	   <div id="t" class="three"> 		 tres<br /> 		 tres<br /> 		 tres<br /> 		 tres<br /> 		 tres<br /> 		 tres<br /> 		 tres<br />		 tres<br /> 		 tres<br /> 		 tres<br /> 		 tres<br /> 		 tres<br /> 		 tres<br /> 		 tres<br />		 tres<br /> 		 tres<br /> 		 tres<br /> 		 tres<br /> 		 tres<br /> 		 tres<br /> 		 tres<br />		 tres<br /> 		 tres<br /> 		 tres<br /> 		 tres<br /> 		 tres<br /> 		 tres<br /> 		 tres<br />		 tres<br /> 		 tres<br /> 		 tres<br /> 		 tres<br /> 		 tres<br /> 		 tres<br /> 		 tres<br />		 tres<br /> 		 tres<br /> 		 tres<br /> 		 tres<br />	   </div>    </div></body> </html>

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