Ir para conteúdo

POWERED BY:

Arquivado

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

alpline

[Resolvido] Colocar 3 divs lado a lado

Por , em Desenvolvimento frontend

Recommended Posts

alpline    0

alpline
Postado

Olá Pessoal gostaria de colocar 3 div assim

 

uma do lado da outra:

<div style="width: 100%">
	<div style="float:right;">aa</div>
	<div style="float:right;">bb</div>
	<div style="float:left;">cc</div>
</div>
mas eu preciso delas assim a "div bb" com 780 pixel, e a "div aa" e "cc" ocupando o tamanho restante dos 100%.

 

tentei assim, mas não deu certo:

<div style="width: 100%">
	<div style="float:right; width: auto;">aa</div>
	<div style="float:right; width: 780px;">bb</div>
	<div style="float:left; width: auto;">cc</div>
</div>
Galera preciso de ajuda que puder me ajudar postem ai...

 

Obrigado t+

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Esse tipo de coisa, só com Javascript pra calcular os tamanhos automáticos das tuas DIVs laterais...

você vai precisar colocar conteudo nelas?

Compartilhar este post

Link para o post
Compartilhar em outros sites

alpline    0

alpline
Postado

Para quem quer aprender consegui resolver.

 

Coloquei um javascript que verifica o tamanho da largura e coloca as medidas nas divs laterais

 

Ai vai o Codigo fonte:

<!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>
<script language="javascript" type="text/javascript">
function abreJanela(){
  w = screen.width;
  w1 = (w - 780)/2 -13;
  document.getElementById('teste1').style.width = w1+'px';
  document.getElementById('teste2').style.width = w1+'px';
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
</title>
<style type="text/css">
<!--
body {
	margin: 0px;
}
-->
</style></head>
<body onload="abreJanela();">
<div>
  <div style="float:left; border:1px solid #FF0000;" id="teste1">aa</div>
  <div style="float:left; width:780px; border:1px solid #FF0000;">aa</div>
  <div style="float:right; border:1px solid #FF0000;" id="teste2">aa</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