Ir para conteúdo

POWERED BY:

Arquivado

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

Thiago Sarturi

Layout com DIV em 4 colunas

Por , em Desenvolvimento frontend

Recommended Posts

Thiago Sarturi    0

Thiago Sarturi
Postado

Boa tarde, estou tentando fazer um layout em 4 colunas, o código que eu fiz foi o seguinte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Teste</title><!--[if IE]><style>#divPrincipal #divCorpo  { height:100%; }#divPrincipal #divCorpo .coluna { height:100%; float:left; }</style><![endif]--><style>body {	margin-top: 0px;	margin-left: 0px;	margin-right: 0px;	margin-bottom: 0px;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;}#divPrincipal {	margin-left: auto;	margin-right: auto;	border: solid 1px #CCCCCC;	width: 868px;	background-color:#000000;}#divPrincipal #divRodape {	height: 20px;	width: 100%;	clear: both;	text-align: center;}#divPrincipal #divCorpo {	display: table; 	padding-bottom: 0px;	padding-top: 0px;	padding-left: 0px;	padding-right: 0px;	width: 100%;}#divPrincipal #divCorpo .coluna {	display:table-cell; 	vertical-align:top;}#divPrincipal #divCol1 {	width: 158px;	background-color:#FFFFFF;	border-right: dashed 1px #CCCCCC;	}#divPrincipal #divCol2 {	width: 310px;	background-color:#FFFFFF;	border-right: dashed 1px #CCCCCC;	}#divPrincipal #divCol3 {	width: 240px;	background-color:#FFFFFF;	border-right: dashed 1px #CCCCCC;	}#divPrincipal #divCol4 {	width: 159px;	background-color:#FFFFFF;	}</style></head><body><div id="divPrincipal">	<div id="divTopo"> </div>	<div id="divCorpo">		<div style="display:table-row">			<div id="divCol1" class="coluna"> <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			</div><div id="divCol2" class="coluna">		  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			</div><div id="divCol3" class="coluna">					  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			</div><div id="divCol4" class="coluna">					  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />			  <br />					</div>		</div>	</div>	<div id="divRodape">© 2007 - Todos os direitos reservados.</div></div></body></html>

Bom, no Firefox ele está funcionando normalmente, quando eu o visualizo no Internet Explorer ele quebra um div para a linha de baixo.

 

Se alguém souber de alguma forma de resolver esse problema agradeço..

 

Obrigado..

Thiago

tsarturi@cidadeinternet.com.br

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Amigo, só quero deixar uma nota, seu código tem coisas de que não necessita.

 

Cumps [*]

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carlos Gialluisi    0

Carlos Gialluisi
Postado

Amigo tente esse modelo. Acredito q funcione tanto no FF como no IE7;Código html:

<html><head></head><body><div id="coluna1"></div><div id="coluna2"></div><div id="coluna3"></div><div id="coluna4"></div></body>

Código CSS:

#coluna1 #coluna2 #coluna3 #coluna4{     float:left;     width:100px;     height:150px;     background:#CCCCCC;     border:thin solid #000;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

bernardesgyn    0

bernardesgyn
Postado

Eu testei aqui no IE e realmente quebrou para linha debaixo a div4.

 

O que fiz: reduzi o tamanho de uma das divs colunas. Ex.: na #divCol4 eu passei para 157px. Ai ficou OK.

So isso, mais nada... A #divPrincipal voce colocou border: solid 1px, ou seja ela continua com os 868px mas, livre para voce ficou 866px; pois você usou 1px em cada lado da div. top, left, rigth e bottom.

Bom, foi o que fiz e deu certo. Também não sei se é o ideal, estou começando agora e nao sou nenhum expert.

 

Espero ter ajudado.

 

 

Boa tarde, estou tentando fazer um layout em 4 colunas, o código que eu fiz foi o seguinte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Teste</title>
<!--[if IE]>
<style>
#divPrincipal #divCorpo  { height:100%; }
#divPrincipal #divCorpo .coluna { height:100%; float:left; }
</style>
<![endif]-->
<style>

body {
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}

#divPrincipal {
	margin-left: auto;
	margin-right: auto;
	border: solid 1px #CCCCCC;
	width: 868px;
	background-color:#000000;
}

#divPrincipal #divRodape {
	height: 20px;
	width: 100%;
	clear: both;
	text-align: center;
}

#divPrincipal #divCorpo {
	display: table; 
	padding-bottom: 0px;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	width: 100%;
}

#divPrincipal #divCorpo .coluna {
	display:table-cell; 
	vertical-align:top;
}

#divPrincipal #divCol1 {
	width: 158px;
	background-color:#FFFFFF;
	border-right: dashed 1px #CCCCCC;
	}
#divPrincipal #divCol2 {
	width: 310px;
	background-color:#FFFFFF;
	border-right: dashed 1px #CCCCCC;
	}
#divPrincipal #divCol3 {
	width: 240px;
	background-color:#FFFFFF;
	border-right: dashed 1px #CCCCCC;
	}
#divPrincipal #divCol4 {
	width: 159px;
	background-color:#FFFFFF;
	}
</style>
</head>

<body>
<div id="divPrincipal">
	<div id="divTopo"> </div>
	<div id="divCorpo">
		<div style="display:table-row">
			<div id="divCol1" class="coluna"> <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			</div><div id="divCol2" class="coluna">		  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			</div><div id="divCol3" class="coluna">
					  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			</div><div id="divCol4" class="coluna">
					  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
			  <br />
		
			</div>
		</div>
	</div>
	<div id="divRodape">© 2007 - Todos os direitos reservados.</div>
</div>
</body>
</html>

Bom, no Firefox ele está funcionando normalmente, quando eu o visualizo no Internet Explorer ele quebra um div para a linha de baixo.

 

Se alguém souber de alguma forma de resolver esse problema agradeço..

 

Obrigado..

Thiago

tsarturi@cidadeinternet.com.br

 

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