Publicado em 6 de ago.

[Resolvido] Coloar DIV ao LADO

#desenvolvimento-frontend

Fala Pessoal, tenho uma dúvida que ta complicada

É o seguinte:

Por default se voce na mudar nada no css e for colocando os divs eles vao se alojando um em baixo do outro.

Eu gostaria de saber como eu faço pra ter este mesmo comportamento só que um ao lado do outro??

Porém o layout que eu preciso terá os dois, vou tentar explicar

-------------------------

| cabecalho |

-------------------------

|menu||corpo||menu|

-------------------------

| rodapé |

-------------------------

Este layout que pus acima é bem basico mas veja..

Primeiramente eu não gostaria de colocar layout fixo ou absolute, pois eu gostaria que conforme os divs crescam o conteudo se alinhe automaticamente, por exemplo

Se o cabecalho aumentar verticalmente, menu, corpo e menu devem ir para baixo..

Se o corpo aumentar o rodapé deve ir para baixo

Mas voltanto ao alinhamento veja que o cabecalho é alinhado normalmente, o menu esquerda também é alinhado normalmente em baixo, porém o corpo e menu direita dever ter por padrao alinhamento lateral com o menu

e o rodapé deve voltar a ter o alinhamento vertical com o menu..

Complicado, nao sei se consegui me fazer entender mas basicamente é isto...

Com o layout fixo se o corpo aumentar verticalmente o rodapé nao sai do lugar...

Bom acho que é isto

Obrigado

Discussão (5)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Thiago Radice· 6 de ago.

hum, vou colar um exemplo pra você, de um layout em tres colunas... =)

<html xmlns="[http://www.w3.org/1999/xhtml">](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;
}

#topo{
 width:750px;
 height:200px;
 background:#669999;
}
#conteudo{
 width:750px;
 background: #CCCCFF;
}
#esq{
 width:200px;
 height:200px;
 float:left;
 background: #6699FF;
}
#meio{
 width:350px;
 height:200px;
 float:left;
 background:#CC99FF;
}
#dir{
 width:200px;
 height:200px;
 float:right;
 background:#33CCCC;
}
#limpa{
 clear:both;
}
#rodape{
 width:750px;
 height:30px;
 background:#9966FF;
}

-->

</style>
</head>

<body>
 <div id="geral" align="center">
 <div id="topo">TOPO</div>
 <div id="conteudo">
	<div id="esq">MENU ESQUERDA</div>
	<div id="meio">CONTEUDO</div>
	<div id="dir">MENU DIREITA</div>
	<div id="limpa"></div>
 </div>
 <div id="rodape">RODAPE</div>
 </div>
</body>
</html>

espero q ajude!! =D

Leonardo Machado Moreira· 7 de ago.

legal cara ajudou muito

agradeço a atenção

você acertou na mosca

Giovani· 7 de ago.

Que bom que a dúvida foi solucionada.

Mas vai uma dica, não esqueçam de pesquisar no fórum.

Sobre este assunto existem muitos tópicos e também scripts prontos.

Veja o link sobre layout: http://forum.imasters.com.br/index.php?showtopic=222275

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

Thiago Radice· 7 de ago.

beleza, legal ter ajudado =)

Leonardo Machado Moreira· 7 de ago.

Opa, Peço Desculpas por ter aberto um tópico redundante entao.

É que geralmente uso o google e o google me retorna o IMASTERS, em casos em que ele nao traz acabo tomando como certo que nao existe tal tópico.

Mais uma vez peço desculpas e Obrigado Pela Ajuda