Posicionamento de div dentro de outra.

[Login Errado 0]

Bom tarde pessoal,

Faz um tempo que não estudo html e css,

mas resolvi voltar a treinar e agora estou com uma duvida meio que boba. rsrs :assobiando:

Bom eu tenho uma div de nome “mãe” com 500px de altura e largura, dentro dela eu tenho

outra div de nome "filha" com 200px de altura e largura.

A div "mae" está centralizada com auxilio do:

*{
margin: 0;
padding: 0;
border: 0;
text-align: center;
}
.mae{
margin:0 auto;
width: 500px;
height: 500px;
background: red;
text-align: left;
}

 

Mas quando eu tento posicionar a div “filha” utilizando o margin-left tudo bem funciona perfeitamente mas quando eu utilizo o margin-top ele funciona apenas no IE mas ele desloca as duas div’s de lugar no Chrome e no Firefox e se eu tento utilizar padding-top na div “mae” ele movimenta a div “filha” mas ele expandir a altura da div “mae” no Chrome e no Firefox.

Segue os exemplos abaixo:

/*Utilizando margin-top na div.filha*/
.mae{
	margin:0 auto;
	width: 500px;
	height: 500px;
	background: red;
	text-align: left;
}
.filha{
	width: 200px;
	height: 200px;
	background: blue;
	margin-left: 20px;
	margin-top: 20px;
}

/*Utilizando padding-top na div.mae*/
.mae{
	margin:0 auto;
	width: 500px;
	height: 500px;
	background: red;
	text-align: left;
	padding-top: 20px;
}
.filha{
	width: 200px;
	height: 200px;
	background: blue;
	margin-left: 20px;
}

Codigo html:

<div class="mae">

		<div class="filha"></div>

</div>

Bom os dois métodos só estão funcionando no IE mas eu lembro que isso não era um problema antes mas posso estar totalmente desatualizado mesmo, bom eu queria saber se essa forma de posicionamento mudou ou sempre foi errada mesmo?

 

 

 

Desde já agradeço :D

[reebr 94]

Seria isto que está querendo? http://jsfiddle.net/rnxn/7LcGx/1/

Se for: http://www.w3schools.com/cssref/css3_pr_box-pack.asp

[NandoMazola 0]

Bom, ja ouviu falar na propriedade float ? Ja tentou ?

[Ruan Aragão 1]

Faz como Nando falou, utiliza float. Na classe ".filha" adiciona float: left;

[Lucas AG 1]

No div filha faz assim.

.filha{
	margin:0 auto;
	margin-top:130px;
	width: 200px;
	height: 200px;
	background: blue;
}

eu adicionei o margin:0 e adicionei o margin-top se não for desse jeito me avise até mais :)