Publicado em 10 de dez.

Alinhando divs por css

Pelo próprio cabeçalho do tópico acho que já da para entender meu problema... To querendo fazer um layout... eu comecei a fazer com tabela... mais agora vou mudar e o usar o método tableless.... Meu código está assim:

<body>
<div id="geral">
	<div id="header">
	</div>
	<div id="menu">
	</div>
	<div id="util">
	</div>
	<div id="footer">
	</div>
</div>
</body>

Basicamente uma header, um menu com a página propriamente dita do lado, e um rodapé em baixo...

o css tá assim:

#geral {
	max-width:1000px;
}
#header {
	max-width:1000px;
	height:150px;
	background-color:#000000;
	vertical-align:top;
}
#menu {
	max-width:160px;
	max-height:500px;
	background-color:#3300FF;
	float:left;
}
#util {
	max-width:800px;
	max-height:500px;
	background-color:#66FF00;
	float:right;
}
#footer {
	max-width:1000px;
	max-height:150px;
	vertical-align:sub;
	background-color:#000000;
}

Só que galera... não estou conseguindo alinhas as divs de jeito nenhum.... Alguém poderia me ajudar?

A ideia é ficar assim:

/applications/core/interface/imageproxy/imageproxy.php?img=http://i293.photobucket.com/albums/mm61/vidalouka/pag.gif&key=8a50e02d05cf6c01ce7cc0c8446bc21aa169870ad2d9c8794c60c27b01fdf4ad" alt="Imagem Postada" />

Discussão (7)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Giovani· 10 de dez.

Aqui no fórum tem tutorial explicando passo-a-passo.

Webstandards: CSS / XML / XHTML / HTML » Laboratório de Scripts (WS) » Layout fixo 2 colunas

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

hantaro· 10 de dez.

Primeiro define tudo com float:left

Segundo, use width ao inves de max-width

Para deixar os espaçoes entre o menu e o conteudo e outros faça o seguinte

margin-bottom para o cabeçalho

margin-right para o menu

margin-top para o rodape

Não sei porque voce usou max-width, mas se for por causa do IE voce pode usar _width

vidaloukaig· 10 de dez.

Consegui resolver tudo galera...

Só mais uma coisa....

Tipo...

A parte do conteudo ela não vai ter um height fixo... ela vai crescer de acordo com a quantidade de informação da página....

Até ai tudo bem...

Só o rodapé está como "clear:both;" ele fica lá no final mesmo... só que se eu aplicar padding-top ele não funciona né? Ele vai anular isso... Porque tipo... eu queria que o rodapé ficasse a "x" pixels da página do conteudo.... Entenderam? Além dele ficar em baixo queria que ele respeitasse uma distância do box do conteudo....

Ficou assim:

<body>
<div id="geral">
	<div id="header">
	</div>
	<div id="menu">
	</div>
	<div id="util">
	</div>
	<div id="footer">
	</div>
</div>
</body>
#geral {
	width:1000px;
}
#header {
	width:1000px;
	height:150px;
	height:150px;
	background-color:#000000;
}
#menu {
	float:left;
	width:187px;
	height:500px;
	margin-top:8px;
	background-color:#3300FF;
}
#util {
	float:left;
	width:800px;
	height:500px;
	margin-top:8px;
	margin-left:8px;
	background-color:#66FF00;
}
#footer {
	width:1000px;
	height:100px;
	clear:both;
	padding-top:8px; /* <!---- AQUI ESTA O LANCE DA DISTÂNCIA... QUERIA QUE ELE RESPEITASSE DE ACORDO COM O DIV DO CONTEUDO... --> */
	background-color:#000000;
}

Carlos Designer· 11 de dez.

Olá vidaloukaig!

Tente ao invés de usar padding-top usar margin-top!

Se não funcionar, tente colocar seu rodape fora da div 'geral' e coloque no seu lugar uma div com o estilo clear:both. Agora com o rodape fora da tive geral creio que funcione uso tanto da margin quando do padding.

Beleza!

vidaloukaig· 11 de dez.

Tipo Carlos... Eu usei os três métodos. E coloquei a div do footer fora da div geral. Até que deu quase certo. Mais de maneira assustadora o footer se alinha com o menu, e não a div do conteudo (sendo que ambas estão dentro da div geral - header, menu, conteúdo -> dentro de geral // footer fora div da geral)....

Como eu disse ele se alinha com o menu. Eu coloquei assim:

#geral {
	width:1000px;
}
#header {
	width:1000px;
	height:197px;
}
#menu {
	float:left;
	width:187px;
	height:500px;
	margin-top:8px;
}
#util {
	float:left;
	width:800px;
	height:500px;
	margin-top:8px;
	margin-left:8px;
}
#footer {
	width:1000px;
	height:50px;
	clear:both;
	padding-top:50px;
}
<div id="geral">
	<div id="header"><? include "header.php"; ?>
	</div>
	<div id="menu"><? include "menu.php"; ?>
	</div>
	<div id="util"><? include "home.php"; ?>
	</div>
</div>
	<div id="footer"><? include "footer.php"; ?>
	</div>

Mesmo usando padding botton ou top ele permanece alinhado com menu, passando por cima do conteúdo... Como resolver isso para alinhar o footer de acordo com o conteúdo?

vidaloukaig· 11 de dez.

Fiz uma correção. Eu tinha colocado tamanho de height absoluto para as divs do menu do conteudo... Tirei os heights do menu e conteúdo deixando o deixei o clear:both no footer.... Ai funcionou: ele desceu para o final! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Só que ele fica colado com o final da div conteudo... e queria que ele respeitasse os espaçamento das demais caixas: 8px. Colocando padding ele não se mexe, porque ele deve ta tentando alinhar 8px com o menu e o clear:both deve ta jogando ele para baixo de novo....

Tem como fazer ele alinhar com a div do conteudo?

Carlos Designer· 12 de dez.

vidaloukaig,

umas dica para você não ter problemas com floats:

Crie seu topo em uma div fora do container.

Coloque as colunas principais no container, não esquecendo do clear:both

Crie o rodapé fora do container.

Essa é a maneira como eu fasso, outras pessoas fazem diferente,mas dessa forma você evita esse tipo de problema que você esta enfrentando.

Pois dessa maneira como você esta fazendo quando se flutua as divs dentro do container e tenta declarar uma margen por exemplo no rodape, alguns navegadores entendem que essa margem começa no topo do container e não na borda inferior da div que flutua. Bom são varias coisa pra ter dor de cabeça...

Boa sorte!