Jump to content


Photo

Div Não Obedeçe O Comando "Auto".


  • Faça o login para participar
4 replies to this topic

#1 FábioD80

FábioD80

    Turista

  • Usuários
  • 30 posts
  • Sexo:Masculino

Posted 27/06/2011, 11:18

Bom dia amigos,
A div central "corpo", não está obedecendo o comando "auto" em
que ela deveria se ajustar ao tamanho da div contida nela.

<html>
<head>
<title>Untitled Document</title>
</head>
 
<style type="text/css"> 
 
#corpo {margin-left: auto; margin-right: auto;
	width:560px; height: auto;
        background-color: #603;
	height: auto; margin-bottom: 30px;}
#div1 {	float: left;
	width: 150px; height: 350px;
	margin: 10px; background-color: #396;}
#div2 {	float: left; width: 200px;
	height: 450PX; margin: 10px;
	background-color: #066;	}
#div3 {float: left; width: 150px;
	height: 430px; margin: 10px;
	background-color: #9C6;}
 
#rodape {width: 100%; height: 140px;
	background-color: #036;}
</style>
 
<body>
<div id="corpo">
<div id="div1"></div> <div id="div2"></div> <div id="div3"></div>
</div>
<div id="rodape">###</div>
</body>
</html>


Um forte abraçoa!

#2 shayllis

shayllis

    12 Horas

  • Usuários
  • 152 posts
  • Sexo:Masculino
  • Localidade:Barueri - SP
  • Interesses:PHP, MySQL, ASP.NET C# e VB, DreamWeaver, VisualStudio, JavaScript

Posted 27/06/2011, 13:57

Isso nunca tinha visto antes. Mas já descobri, o problema está na propriedade float das divs que estão dentro da div corpo. Retirando já funciona... Mas no seu caso, como você quer que haja um fundo, tente determinar um tamanho fixo ou por porcentagem, daria também para ajustar só com margins e sem o uso do float, mas só é compatível com o IE 7 e 6.
Caso tenha sido útil colabore com um ponto. :D

#3 FábioD80

FábioD80

    Turista

  • Usuários
  • 30 posts
  • Sexo:Masculino

Posted 30/06/2011, 10:47

shayllis, fiz o que sugeriu mas não adiantou, pois as div's ficaram uma embaixo da outra, e gostaria de que elas ficassem uma do lado da outra. e se ajustando conforme o conteuúdo do site.

#4 shayllis

shayllis

    12 Horas

  • Usuários
  • 152 posts
  • Sexo:Masculino
  • Localidade:Barueri - SP
  • Interesses:PHP, MySQL, ASP.NET C# e VB, DreamWeaver, VisualStudio, JavaScript

Posted 04/07/2011, 09:34

Bom neste caso das divs uma sobre as outras, movimente-as usando margin. :D

#5 André Manoel

André Manoel

    Doutor

  • Usuários
  • 996 posts
  • Sexo:Masculino
  • Localidade:Brasilia

Posted 05/07/2011, 01:03

Boa noite Fábio...

Para resolver isso basta você utilizar um display: table dentro da div corpo..

Faça o teste...

#corpo {
        margin: 0px auto 30px auto;
        width:560px; 
        background-color: #603; 
        display: table;
}

Pode retirar a altura(height)
E para diminuir vc pode usar margin somente... ao invés de margin-left e etc...

margin: top right bottom left;

Iniciando na Ajuda On line...

Posted Image Meu post lhe ajudou? Reputar/votar é uma das formas de agradecer.




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq