Ir para conteúdo

POWERED BY:

Arquivado

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

Stickman

layout liquido

Por , em Desenvolvimento frontend

Recommended Posts

Stickman    0

Stickman
Postado

Seguinte, alguém sabe como fazer o exemplo a baixo dar certo?

 

<div style="float:left; width:150px;">Esquerda Definida</div>
<div style="float:left; width:100%;">Centro Dinâmico</div>
<div style="float:left; width:150px;">Direita Definida</div>

 

Mas de forma que fiquem na mesma linha e a div do meio respeite as laterais definida e distribua os 100% dentro do que ela pode!

 

Eu quero fazer a mesma coisa com div do que com estas tables.

 

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150"></td>
<td width="100%"></td>
<td width="150"></td>
</tr>
</table>

 

Abraço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

programador php    0

programador php
Postado

tenta assim

<style>
	#esq {
		width: 150px;
		float: left;
		background-color: Red;
		height: 50px;
	}
	
	#meio {
		width: auto !important;
		background-color: Blue;
		height: 50px;
		float: left;
	}
	
	
	#dir {
		width: 150px;
		float: right;
		background-color: Yellow;
		height: 50px;
	}
	
</style>
<div id="esq"></div>
<div id="meio"></div>
<div id="dir"></div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ronaldo Bitencourt    0

Ronaldo Bitencourt
Postado
CODE
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { margin:0px; padding:0px; }
#esq {
position:absolute;
z-index:1;
width: 150px;
left:0px;
top:0px;
background:#CCC;
}

#geral {
margin:0px 150px;
background-color:#DDD;
}


#dir {
position:absolute;
z-index:1;
width: 150px;
right:0px;
top:0px;
background-color:#CCC;
}

</style>
</head>
<body>


<div id="geral">Meio

<div id="esq">

Esquerda

</div>

<div id="dir">

Direita

</div>

</div>

</body>
</html>



testa ai!

funciona no IE6 IE7 e no FF com o DTD strict
falow

Compartilhar este post

Link para o post
Compartilhar em outros sites

WillianAndrade    0

WillianAndrade
Postado

é um layout elástico certo?

 

vê se te ajuda:

 

htm

<!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" xml:lang="pt-br" lang="pt-br">

<head>

	<!-- Meta -->
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta name="author" content="Willian Andrade - 2008" />

	<!-- CSS -->
	<style type="text/css">
		* {margin:0; padding:0;}
		#wrapper {width:770px; margin:0 auto;}

		#divTopo {height:200px; background-color:black;}

		#divEsquerda, #divDireita, #divCentro {height:500px;} /*apenas para melhor visualização*/

		#divEsquerda {width:150px; float:left; background-color:red;}
		#divDireita {width:150px; float:right; background-color:red;}
		#divCentro {background-color:blue;}
		#divRodape {height:50px; background-color:black;}

	</style>

</head>

<body>

<div id="wrapper">
  <div id="divTopo">
	<p>Teste div Topo</p>
  </div>

  <div id="divEsquerda">
	<p>Teste div Esquerda</p>
  </div>

  <div id="divDireita">
	<p>Teste div Direita</p>
  </div>

  <div id="divCentro">
	<p>Teste div Centro</p>
  </div>

  <div id="divRodape">
	<p>Teste div Rodape</p>
  </div>
</div>
</body>
</html>

 

explicação:

o truque é você criar as divs laterais primeiro e posiciona-las (float:left; e float:right;)

 

e dps a div central você não aplica nada, ela se posiciona dentro das duas naturalmente.

 

obs: para visualizar o efeito apenas tire o width:770px do elemento #wrapper.

 

(y)

 

flw

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

e dps a div central você não aplica nada, ela se posiciona dentro das duas naturalmente.

...Se tiver com um overflow: auto (acho)

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

titulo editado:

leia as regras deve-se expecificar a sua duvida logo no titulo.

Para Experts! http://forum.imasters.com.br/public/style_emoticons/default/seta.gif layout liquido

 

CSS:

*{
margin:0;
padding:0;
list-style-type:none;
}
#col-1,#col-2{
width:150px;
background:#fc0;
height:auto!important;
height:500px;
min-height:500px;
}
#col-1{
float:left;
}
#col-2{
float:right;
}
#conteiner{
height:auto!important;
height:500px;
min-height:500px;
display:block;
background:#f00;
}

HTML:

<div id="col-1"></div>
<div id="col-2"></div>
<div id="conteiner"></div>

assim acredito que seria a melhor maneira e lembranddo-se a sua duvida já foi comentada bastante no forum

antes de postar pesquise :)

abraço e espero ter leh ajudado

 

Ps.: programador php o seu código não funcionou, é só um toque, e tambem evite usar nomes como ESquerda e Direita ;)

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